1

This relates to Nested flex containers with inner scroll bar and snug/covering lower container but is more complex - turns out a simplification I had made to the question led to the answers working in the JsFiddle, but not in my actual use case.

Situation: I have a fairly deeply nested structure of flexbox containers. Deep inside, there's a container that sometimes has a lot of content, and sometimes only a little. To not blow up the UI, this means it has to have a scrollbar (right-top-wrapper and right-top-content). However, there's another container just below it (right-bottom) that I would like to have just below the space actually used by right-top-content.

When I try to apply the suggestions from Nested flex containers with inner scroll bar and snug/covering lower container this leads to a bug in Firefox and Ms Edge: they don't shrink right-top-wrapper, and the content expands beyond the viewport.

JsFiddle: https://jsfiddle.net/3rm471tg/1/

Firefox / Ms Edge output (works as intended in Chrome):

JsFiddle output in Firefox, showing viewport overflow

.outer {
  display:flex;
  flex-direction: column;
  align-items: stretch;
  height: 300px;
  background: teal;
  padding:4px;
}
.top {
  flex 0 0 auto;
  background:cyan;
}
.main {
  display: flex;
  flex: 1 1 0px;
  padding: 4px;
  background:purple;
}

.left {
  flex: 1 1 0px;
  background: red;
}
.right {
  flex: 0 0 auto;
  display:flex;
  flex-direction: column;
  background: green;
  padding: 4px;
}

.right-top-wrapper {
  flex: 0 1 auto;
  overflow-x: auto;
  overflow-y: scroll;
  background: blue;
}

.right-top-content {
  margin: 4px;
  //height:100px;
  width:100px;
  background: pink;
}

.right-bottom {
  flex: 0 0 auto;
  background: yellow;
  margin: 4px;
}
<div class="outer">
 <div class="top">
  Top content
 </div>
 <div class="main">
  <div class="left">
  Left content
  </div>
  <div class="right">
   <div class="right-top-wrapper">
    <div class="right-top-content">
     Right top content that just goes on and on and on and lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
   </div>
   <div class="right-bottom">
    Right bottom
   </div>
  </div>
 </div>
</div>

How can I get the "Right bottom" to be snugly below the "Right top content", across browsers?

Community
  • 1
  • 1
Jxtps
  • 654
  • 5
  • 15
  • 1
    Add `min-height: 0` to `.main`. https://jsfiddle.net/3rm471tg/2/ – Michael Benjamin Feb 14 '17 at 00:33
  • 1
    Your solution worked, so it does seem like a duplicate, thanks! For future visitors: be sure to read the dupe's answer, you can alternatively use e.g. overflow: hidden; instead of min-height: 0; if that makes more sense in your situation. – Jxtps Feb 14 '17 at 01:16

0 Answers0