title: Flexbox in responsive table layout: Column not stretching to full height
body: <p>I am using flexbox to create a responsive table. I'd like to achieve the following layout:</p>
  
  <p>Mobile:</p>
  
  <pre><code>X | 1 | 2 |
  A |   |   |
  B |   |   |
  C |   |   |
  </code></pre>
  
  <p>Desktop:</p>
  
  <pre><code> X | A | B | C |
   1 |   |   |   |
   2 |   |   |   |
  </code></pre>
  
  <p>To this end I have created multiple flexboxes, one as a parent to the entire business and one for each row on the mobile layout.</p>
  
  <p>I have then used breakpoints and <code>flex-direction: row/column</code>, which appears to work pretty well save for one issue:</p>
  
  <p><strong>On the Desktop variant, the <code>X | 1 | 2</code> column (see style <code>tickets__row</code>) does not stretch to the full height of the parent. This is not what I expected, since <code>align-items: stretch</code> is the default property (plus assigning it has no effect).</strong></p>
  
  <p>How can I solve this? Demo code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
     box-sizing: border-box;
    }
  
    .tickets__table {
     display: flex;
     flex-direction: column;
    }
  
    .tickets__row {
     display: flex;
     flex: 1 1 auto;
     flex-direction: row;
    }
  
    .tickets__cell {
     width: 33%;
    }
  
    .tickets-label {
     border: 1px solid rebeccapurple;
    }
  
    .tickets-content {
     border: 1px solid aqua;
    }
  
    @media all and (min-width:600px) {
     .tickets__table {
      flex-direction: row;
     }
  
     .tickets__row {
      flex-direction: column;
     }
  
     .tickets__cell {
      width: 100%;
     }
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tickets__table"&gt;
  
    &lt;div class="tickets__row"&gt;
      &lt;div class="tickets__cell tickets-label"&gt;
        &amp;nbsp;
      &lt;/div&gt;
      &lt;div class="tickets__cell tickets-label"&gt;
        Price 1
      &lt;/div&gt;
      &lt;div class="tickets__cell tickets-label"&gt;
        Price 2
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="tickets__row"&gt;
      &lt;div class="tickets__cell tickets-label"&gt;
        Ticket A
      &lt;/div&gt;
      &lt;div class="tickets__cell tickets-content"&gt;
        $495&lt;br /&gt;
        &lt;s&gt;$595&lt;/s&gt;
      &lt;/div&gt;
      &lt;div class="tickets__cell tickets-content"&gt;
        $595&lt;br /&gt;
        &lt;s&gt;$695&lt;/s&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="tickets__row"&gt;
      &lt;div class="tickets__cell tickets-label"&gt;
        Ticket B
      &lt;/div&gt;
      &lt;div class="tickets__cell tickets-content"&gt;
        $545&lt;br /&gt;
        &lt;s&gt;$655&lt;/s&gt;
      &lt;/div&gt;
      &lt;div class="tickets__cell tickets-content"&gt;
        $655&lt;br /&gt;
        &lt;s&gt;$765&lt;/s&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="tickets__row"&gt;
      &lt;div class="tickets__cell tickets-label"&gt;
        Ticket C
      &lt;/div&gt;
      &lt;div class="tickets__cell tickets-content"&gt;
        $425&lt;br /&gt;
        &lt;s&gt;$505&lt;/s&gt;
      &lt;/div&gt;
      &lt;div class="tickets__cell tickets-content"&gt;
        $505&lt;br /&gt;
        &lt;s&gt;$590&lt;/s&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>