How to make div have the same height as the smallest div?

Question

So I have a list next to a video player, as seen here

I want the menu to be scrollable, and only have it as big as the video player. The problem is that the video player is responsive, so the height can vary based upon how wide the screen is.

The HTML code looks a bit like this:

<div class="row justify-content-center" id="chat">
    <div class="col-9">
        <video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto">
        </video>
    </div>
    <div class="col-3">
          <ul class="nav nav-pills flex-column list-scroll">
            <li class="nav-item">
              <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li><li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li><li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li><li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li><li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
        </div>
</div>

score 3 · Accepted Answer · answered Jun 08 '17 at 17:12

You can use position: absolute on the scrollable element to remove it from the flow of the page, and use overflow-y: scroll

.chat > .col-3 > .nav {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow-y: scroll;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-center chat" id="chat">
    <div class="col-9">
      <video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto">
        </video>
    </div>
    <div class="col-3">
      <ul class="nav nav-pills flex-column list-scroll">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Thank you, this works! But I was wondering if I could adjust it a little bit so lit looks like [this](http://i.imgur.com/yMmoXFj.png). I want a row of buttons that are are always positioned at the bottom, and then a scrollable list above. I thought of adding the buttons and putting them in the same parent div as the menu, but then they stay stuck at the top because of the position: aboslute — user2657943, Jun 08 '17 at 17:36

How to make div have the same height as the smallest div?

1 Answers1