0

I'm using flexbox to show two <div>s side by side. One has a video and the other has text. Neither <div> 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 overflow-y: auto to the text div, but that didn't work. Here is a demo of the problem:

* {
  -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%;
}
<div class="wrapper">
  <div class="video">
    <div class="red"></div>
    <div class="embed-container"><iframe src="http://www.youtube.com/embed/QILiHiTD3uc" frameborder="0" allowfullscreen></iframe></div>
  </div>
  <div class="text">
    <p>
      When you change the width of your browser window, the video's
      dimensions will change.
    </p>

    <p>
      I want the height of this text div to never exceed the height of the
      video. It should have a vertical scrollbar instead.
    </p>

    <p>
      For testing purposes, I have created the <code>div.red</code>
      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 <code>div.red</code> element is not
      possible. I want this text div to have a vertical scrollbar instead.
    </p>

    <p>
      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.
    </p>
  </div>
</div>
Nick
  • 8,049
  • 18
  • 63
  • 107
  • 1
    Sadly it looks like the answer to this is, "Not possible with flexbox". Related: http://stackoverflow.com/questions/34194042/height-of-all-flex-items-in-a-row-doesnt-exceed-the-height-of-one-specific-sibl – Hunter Turner Oct 27 '16 at 15:47
  • I guess that is possible if all the contents of `text` is wrapped into another div which will be `absolute` relative to `text` and then give `overflow-y: auto` to `text` – kukkuz Oct 27 '16 at 16:00
  • something like [in this answer](http://stackoverflow.com/questions/39545915/css-limit-the-height-from-scroll-dynamically/39546076#39546076) – kukkuz Oct 27 '16 at 16:03
  • If jQuery solution is an option then check this out. http://codepen.io/Nasir_T/pen/bwyVvy – Nasir T Oct 27 '16 at 16:35

0 Answers0