Same size columns with potential scroll in one of them

Question

Using html and css, I'm trying to build the following interface.

Picture of how it currently looks like :

Inside a unique row I've put three columns (using bootstrap) that have the same width on my page. The left and right columns both contain a video, and since the video has a bigger height than what is contained in the middle column, the row height seems to be equal to the videos' height (hence the cyan background which has the same height as the videos). However, what is contained in the middle column is a dynamic list filled using a javascript method (the method can also delete elements but it's not important here). What I'd like to do is:

-Make the pink background reach the orange one at the bottom of the picture.

-Make the list automatically scrollable (using overflow-y: auto; or something) when too many elements in the list (which is below the "scrollable list" item in the picture) would otherwise overlap the orange thing at the bottom.

I've already tried many things, current code being:

.scrollable-list{
    overflow-y: auto;
    column-fill: auto;
}

with both divs stuffand scrollable-list being inside a parent middle-column div.

I've found plenty of answers on how to make same-height columns but I'm struggling with the vertical scroll, which must not be in the whole middle column but must start below the SCROLLABLE LIST item.

Let me know if my question is not understandable, I'll try to explain better.

Answer 1

If I understood your question correctly, you want to ensure the middle (pink) area's height coincides with the video's height which they shouldn't never change within the col-sm-4 range. However, the video heights will change when Bootstrap resizes to col-xs-* (whatever you choose here). Same thing will happen at larger resolutions. This is where @media queries to re-size the min-height come in play.

Here is the modified HTML

<div class="container">
<p>
  <script type="text/javascript" src="script.js"></script>
  <div class="col-sm-4 no-padding">
    <div class="video-wrapper">
      <div class="leftvid">
        <iframe id="vid1" width="560" height="315" src="http://www.youtube.com/embed/rFytL3iK3v0?autohide=1&enablejsapi=1"></iframe>
      </div>
    </div>
  </div>
  <div class="col-sm-4 no-padding middle">
    <div class="content">
      <div class="current">
        <h3>STUFF</h3>
        <ul>
          <li>Stuff 1</li>
          <li>Stuff 2</li>
        </ul>
      </div>
      <div class="playlist">
        <h3>SCROLLABLE LIST</h3>
        <ul id="playlistul">
          <div class="element">

            <div id="elname">
              <li>NAME
                <ul>
                  <li>SUBNAME</li>
                  <li>SUBNAME</li>
                  <li>SUBNAME</li>
                  <li>SUBNAME</li>
                  <li>SUBNAME</li>
                  <li>SUBNAME</li>
                  <li>SUBNAME</li>
                  <li>SUBNAME</li>
                  <li>SUBNAME</li>
                  <li>SUBNAME</li>
                  <li>SUBNAME</li>
                  <li>SUBNAME</li>
                  <li>SUBNAME</li>
                  <li>SUBNAME</li>
                  <li>SUBNAME</li>
                  <li>SUBNAME</li>
                </ul>
              </li>
            </div>
            <div id="elbutt">
              <button>Remove</button>
            </div>

          </div>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-sm-4 no-padding">
    <div class="video-wrapper">
      <div class="rightvid">
        <iframe id="vid2" width="560" height="315" src="http://www.youtube.com/embed/2toH5KbyT2s?autohide=1&enablejsapi=1"></iframe>
      </div>
    </div>
  </div>
</p>

And here is the CSS:

.no-padding{
  padding:0px;
}

.container > div{
  background-color: rgb(200,200,255);   
}

.video-wrapper{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  margin: auto;
}

.video-wrapper iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.col-sm-4.no-padding.middle{
  background-color: rgb(255,130,255);
  height:100%;
  overflow-y: auto;
}

.middle .content{
  padding: 20px 0 0px 20px;
}

.middle h3{
  margin: 0px;
  font-family: "Raleway";
  margin-bottom: 10px;
}

.middle button{
  background-color: rgb(255,90,90);
  border: 0px;
  padding: 5px;
  transition-duration: 0.35s;
}

.middle button:hover{
  background-color: rgb(255,45,45);
}

.leftvid{
  border: 3px;
}

.rightvid{

}

.playlist{
  overflow: auto;
  height: 132px;
}

.playlist button{
  display: relative;
  margin-right: 10px;
}

.playlist element{
  margin: auto;
  text-align: center;
  vertical-align:middle;
  display: inline;
  top: 0;
}

#elname{
  display:table-cell;
}

#elbutt{
  display: table-cell;
  vertical-align: middle;
}

@media (max-width: 1200px){
  .playlist{
    height: 94px;
  }
}

@media (max-width: 991px){
  .playlist{
    height: 52px;
  }
}

@media (max-width: 768px){
  .playlist{
    height: 230px;
  }
}

Here is the CODEPEN

p.s. If I misunderstood, let me know where. But I think this should give you at least a good thinking piece to go from here.