title: Create a row of flexbox items with a max height defined by one child
body: <p>I'm trying to create a flexbox layout that does something I thought would be a little easier, but I'm having trouble finding the right way to do it.</p>
  
  <p>I want to have a row of items with dynamic height that allows <em>one</em> child to grow as tall as need be, but limits the height of the other item so that content is cut off.</p>
  
  <p><a href="https://i.stack.imgur.com/nkXdb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nkXdb.png" alt="An illustration of the desired layout"></a></p>
  
  <p>I want to use flexbox, so browser issues associated with that are not an issue, but I would like to avoid any use of JavaScript in the solution.</p>
  
  <p>Any ideas? This might be a trivial problem, but I'm having trouble finding anything with the search terms I've been using. Thanks!</p>
  
  <p>Here's a <a href="http://codepen.io/neagle/pen/NAEZBv" rel="noreferrer">CodePen demo</a> in case you'd like to modify it for use in your answer.</p>
  
  <p>This is my reference flexbox layout:</p>
  
  <pre><code>.row {
      display: flex;
  }
  
  .info {
      flex: 0 0 200px;
  }
  
  .description {
      flex: 1 1 auto;
  }
  
  &lt;div class="row"&gt;
      &lt;div class="info"&gt;This should grow dynamically&lt;/div&gt;
      &lt;div class="description"&gt;This should be limited in height by the .info div&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>