title: Space management inside nested flexboxes
body: <p>I'm having issues with space management in nested flex columns.</p>
  <p>Here is my example. I have a column with fixed height, and two children: one with fixed height, the other one filling available space with &quot;flex: 1 1 auto&quot;. So far so good, it works. But now, this second child becomes another flex column, with two children. Same idea: one child has fixed height, the other one is supposed to fill available space. Doesn't work! Here is the code:</p>
  <pre><code>&lt;div class=&quot;parent&quot;&gt;
    &lt;div class=&quot;title&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;list&quot;&gt;
      &lt;div class=&quot;fixed-child&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;resized-child&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>.parent {
    height: 300px;
    width: 200px;
    display: flex;
    flex-direction: column;
    border: 2px solid black;
  }
  
  .title {
    height: 50px;
    flex: 0 0 auto;
    background-color: green;
  }
  
  .list {
    flex: 1 1 auto;
    background-color: red;
    border: 2px solid red;
  }
  
  .fixed-child {
    height: 50px;
    flex: 0 0 auto;
    background-color: blue;
  }
  
  .resized-child {
    flex: 1 1 auto;
    background-color: yellow;
    border-color: 1px solid yellow;
  }
  </code></pre>
  <p>What I need VS what i'm getting:</p>
  <p><a href="https://i.stack.imgur.com/nkH6O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nkH6O.png" alt="enter image description here" /></a></p>
  <p>Here's a fiddle for you to experiment: <a href="https://jsfiddle.net/rkyzvn36/" rel="nofollow noreferrer">https://jsfiddle.net/rkyzvn36/</a></p>
  <p>Before you ask, I cannot put my 3 elements (green, blue and yellow) in a unique column: the red column is a component. Is there a solution to my problem, some flex behavior I don't know about? Thanks.</p>