Create a row of flexbox items with a max height defined by one child
<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>