title: Style one single column with flexbox
body: <p>Maybe I want something impossible. 
  I want a website with only a single column styled with flexbox. The purpose is that only one column stretches its height to the footer regardless the size of the content of the column. Something like below structure:</p>
  
  <p><a href="https://i.stack.imgur.com/sU53b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sU53b.png" alt="enter image description here"></a></p>
  
  <p>I try to reach that with this code (I am using bootstrap):</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
     &lt;div class="row"&gt;  
       &lt;header class="col-md-12"&gt;
         stuff...
       &lt;/header&gt;
       &lt;div class="col-md-1 col-a"&gt;
         stuff...
       &lt;/div&gt;
       &lt;div class="col-md-10 col-b"&gt;
         Stuff...
       &lt;/div&gt;
       &lt;div class="col-md-1 col-c"&gt;
          &lt;div class="col-c-child"&gt;
            Stuff..
          &lt;/div&gt;
       &lt;/div&gt;
       &lt;footer class="col-md-12"&gt;
         Stuff
       &lt;/footer&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And then adding in the CSS this specific for the <code>col-c</code> and <code>col-c-child</code>:</p>
  
  <pre><code>.col-c {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .col-c-child {
    flex: 1;
  }
  </code></pre>
  
  <p>But is not working. 
  Any idea?</p>
  
  <p><strong>THE SOLUTION</strong>: </p>
  
  <ul>
  <li>Create a row for the <code>header</code>, other for the content and other for the <code>footer</code>, that is - don't have everything in the same row.</li>
  <li>Build a div-wrapper englobing col-a, col-b and col-c with <code>display:flex</code> and <code>flex-direction: row;</code></li>
  <li>get rid of col-c-child</li>
  <li>col-c with <code>flex: 1;</code></li>
  </ul>
  
  <p>Thanks to @jelleB who elucidated me for part of it.</p>