title: Scrolling a second column if it overflows height of first
body: <p>I am creating a row in Bootstrap 4 which has two columns.
  The left column is formed of two Cards and the right column is one Card.</p>
  <p>The left column's cards are both responsive embeds with iframes, using the embed-responsive-16by9 classes.</p>
  <p>The right column is a simple card with a bullet point list. I want the right column to match the total 100% height of the leftmost column, and overflow with scroll if the list of bullet points get too long.</p>
  <p>I have spent hours playing with flexboxes and overflows and all sorts and just cannot get this behaviour to work.</p>
  <p>From the below code you can see #chatItems div has new items added to it throughout from javascript code.</p>
  <p>With the file as attached the whole row becomes the height of the right hand column as the number of chatItem list items increases and doesn't start to scroll.</p>
  <p><a href="https://i.stack.imgur.com/vygdF.jpg" rel="nofollow noreferrer">Overall Layout</a></p>
  <pre><code>&lt;div class=&quot;row pt-3&quot;&gt;
  &lt;div class=&quot;col-md-9&quot;&gt;
  
     &lt;div class=&quot;card-deck mb-3 text-center&quot;&gt;
          &lt;div class=&quot;card mb-4 shadow-sm&quot;&gt;
              &lt;div class=&quot;card-header&quot;&gt;
                  &lt;h4 class=&quot;my-0 font-weight-normal text-left text-uppercase&quot;&gt;Video Player&lt;/h4&gt;
              &lt;/div&gt;  
            
              &lt;div class=&quot;card-body embed-responsive embed-responsive-16by9&quot;&gt;         
                  &lt;iframe src=&quot;https://player.vimeo.com/video/12345567895?autoplay=1&amp;loop=1&amp;autopause=0&quot; width=&quot;100%&quot; class=&quot;embed-responsive-item&quot; allow=&quot;autoplay; fullscreen&quot; frameborder=&quot;0&quot; webkitallowfullscreen mozallowfullscreen allowfullscreen autoplay&gt;&lt;/iframe&gt;              
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
        
      &lt;div class=&quot;card-deck mb-3 text-center&quot;&gt;
          &lt;div class=&quot;card mb-4 shadow-sm&quot;&gt;
              &lt;div class=&quot;card-header&quot;&gt;
                  &lt;h4 class=&quot;my-0 font-weight-normal text-left text-uppercase&quot;&gt;Video Player&lt;/h4&gt;
              &lt;/div&gt;
          
              &lt;div class=&quot;card-body embed-responsive embed-responsive-16by9&quot;&gt;         
                  &lt;iframe src=&quot;https://player.vimeo.com/video/12345567896?autoplay=1&amp;loop=1&amp;autopause=0&quot; width=&quot;100%&quot; class=&quot;embed-responsive-item&quot; allow=&quot;autoplay; fullscreen&quot; frameborder=&quot;0&quot; webkitallowfullscreen mozallowfullscreen allowfullscreen autoplay&gt;&lt;/iframe&gt;              
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;col-md-3 &quot;&gt;
    &lt;div class=&quot;card-deck mb-3 text-center&quot;&gt;
          &lt;div class=&quot;card mb-4 shadow-sm&quot;&gt;
              &lt;div class=&quot;card-header&quot;&gt;
                  &lt;h4 class=&quot;my-0 font-weight-normal text-left text-uppercase&quot;&gt;Chat Items&lt;/h4&gt;
              &lt;/div&gt;
          
              &lt;div class=&quot;card-body p-0 overflow-y-scroll&quot; id=&quot;chatItems&quot;&gt;            
                  &lt;ul&gt;
                      &lt;li&gt;First Item&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>