title: Make a HTML with two columns of equal height and one of them scrollable
body: <p>I have a HTML-table consisting of one row and two columns (in other words, just two cells). The idea was to make the two columns (i.e. the two cells) have equal height, which - at least for me - turned out to be non-trivial if using floats or flexbox, hence why I resorted to a HTML-table.</p>
  
  <p>The left cell (column) is filled with content dynamically, hence its height is not known beforehand. The right cell (column) is also filled dynamically (actually a Facebook feed), but its height should adapt to (i.e. always be equal to) the height of the left column. BUT this right column should ALSO be scrollable, meaning that the user can read all its content simply by using the column's own scrollbar.</p>
  
  <p>So the point is to have the right column's height, as displayed on the screen, adapt to that of the left column, while also making the right column (but not the left column) scrollable. </p>
  
  <p>By default, the right column has in fact equal height to the left column [apart from the annoying fact that the borders fall outside the cell, but let's leave that aside for now]. But the problems start once the right column's content becomes too big to fit. I could set "overflow-y: hidden;" for the content-div inside the right column, which would enforce equal height, but obviously that way the right column would not be scrollable (overflowing content would simply be cut off). [Set "overflow-y: hidden;" to the table cell itself, as opposed to the div contained in it, doesn't seem to do anything, which actually makes some sense, since it's the div and not the table-cell that overflows.]</p>
  
  <p>Conversely, if I set "overflow-y: scroll;" I do get the desired scrollbar, but as it turns out, this does NOT enforce equal height: I get a useless scrollbar, while the column becomes so high as to be able to display all the content at once anyway.</p>
  
  <p>Question is therefore: How do I get both equal height AND a scrollbar?</p>
  
  <p>I've also experimented with "height: auto;" and "height: 100%; ", but neither  seem to help, as far as I could tell...</p>
  
  <p>Here is a screen shot of the current situation:</p>
  
  <p><img src="https://i.stack.imgur.com/uxzAP.jpg"><br/><sub>(source: <a href="http://www.test2468.nl/wptest/Screenshot%20(3151).png" rel="nofollow noreferrer">test2468.nl</a>)</sub><br/></p>
  
  <p>You can see the right column's scrollbar (to the left of the <em>page</em> scrollbar), but you can also see that this column becomes higher than the left column.</p>
  
  <p>The code as-is is quite simple:</p>
  
  <pre><code>&lt;table&gt;
  &lt;col width="60%"&gt;
  &lt;col width="38.7%"&gt;
  
  &lt;tr&gt;
  
  &lt;td&gt;
     [... Fill the left column/cell with dynamic content ]
  &lt;/td&gt;
  
  &lt;td id="fb-td" style="vertical-align: top;"&gt;
     &lt;div id="fp2-rechts"&gt;
        &lt;div class="faceb" id="fb-berichten2"&gt;
           &lt;h3 id="fb-kop2"&gt;OP FACE-&lt;br /&gt;BOOK&lt;/h3&gt;
           &lt;?php echo do_shortcode('[custom-facebook-feed id="168766623258787"  
           num=16]');   ?&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/td&gt;
  
  &lt;/tr&gt;
  &lt;/table&gt;      
  </code></pre>
  
  <p>As you see, there are two wrapper-div's inside the right table cell, which may be one to many, but this doesn't seem relevant here.</p>
  
  <p>Thanks.</p>