2 flexbox columns side by side, both with fluid height, with one never exceeding the height of the other <p>I'm using flexbox to show two <code>&lt;div&gt;</code>s side by side. One has a video and the other has text. Neither <code>&lt;div&gt;</code> has a fixed height. I want the text div to never be taller than the video div. If the text div would naturally be taller than the video div then I want the text div to have a vertical scrollbar. How can I do this? I've tried adding <code>overflow-y: auto</code> to the text div, but that didn't work. Here is a demo of the problem:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; background-color: #ddd; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.42857143; } .wrapper { display: flex; flex-wrap: wrap; } .video, .text { padding: 10px; } .video { position: relative; width: 75%; background-color: #999; } .text { width: 25%; background-color: #bbb; } @media (max-width: 767px) { .video, .text { width: 100%; } } .red { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; background-color: red; } /* From embedresponsively.com */ .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt; &lt;div class="video"&gt; &lt;div class="red"&gt;&lt;/div&gt; &lt;div class="embed-container"&gt;&lt;iframe src="http://www.youtube.com/embed/QILiHiTD3uc" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="text"&gt; &lt;p&gt; When you change the width of your browser window, the video's dimensions will change. &lt;/p&gt; &lt;p&gt; I want the height of this text div to never exceed the height of the video. It should have a vertical scrollbar instead. &lt;/p&gt; &lt;p&gt; For testing purposes, I have created the &lt;code&gt;div.red&lt;/code&gt; element. Currently, it is possible to expose this div by resizing your browser window (you will see red below the video). I want to make it so that exposing the &lt;code&gt;div.red&lt;/code&gt; element is not possible. I want this text div to have a vertical scrollbar instead. &lt;/p&gt; &lt;p&gt; Note that you need to have your browser window at least 768px wide in order for the video div and text div to be side by side. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p>