1

I have a situation where I'm using flex boxes to create containers that fill the remaining space in a parent container. This behavior needs to happen on multiple divs nested within each other, with other content in those divs as well. The inner-most div needs to scroll when the bottom of it is cut off. I've provided a simplified example of my HTML and styling here:

.drawer {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100px;
}
.header {
  height: 100px;
}
.main {
  flex: 2;
  display: flex;
  flex-flow: column;
}
.content {
  flex: 2;
  display: flex;
  flex-flow: column;
}
.text {
  flex: 2;
  overflow-y: auto;
}
<div class="drawer">
  <div class="header">
    <h2>Header</h2>
  </div>
  <div class="main">
    <div class="navigation">
       Navigation
    </div>
    <div class="content">
      <div class="controls">
        Controls
      </div>
      <div class="text">
        Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
      </div>
    </div>
  </div>
</div>

With this HTML, the div with the class "text" needs to scroll independently. It doesn't. However, if I remove the div with the class "content", the text div does scroll independently. Unfortunately that "content" div is necessary in my actual situation, so I'm wondering if there's another way to accomplish this?

Rob Bauman
  • 65
  • 8
  • 1
    I presume this is just a fault in the example, but what's the point of having `.main` and `.content` if `.content` just fills `.main`?? – jaunt Sep 09 '15 at 17:45
  • As I said, this is a simplified example. The .main div has other content in it before the .content div. I'll update the html to be more representative of what I have. – Rob Bauman Sep 09 '15 at 17:53
  • 1
    `.main, .content { min-height: 0 }` – Oriol Sep 09 '15 at 18:34
  • I figured that out about 30 seconds before seeing your comment. Thanks! :) – Rob Bauman Sep 09 '15 at 18:36

0 Answers0