Scrollable container within flex layout

Question

I'm currently working on a simple CSS layout consisting of two panes, which sit side by side, and a footer. I have the following restrictions:

The left-hand pane is fixed width.
The footer is fixed height and must not fall of the bottom of the containing div.
The remaining dimensions expand to fill the available space.
The right-hand pane contains a lot of content. It should wrap horizontally and scroll vertically.

I have attempted to produce something suitable using flexbox. A working example can be found on jsfiddle.

HTML:

<div class="container">
  <div class="top">
    <div class="left">
       Top-left content
    </div>
    <div class="right">
      <div class="rightInternal">
        Large content goes here.
      </div>
    </div>
  </div>
  <div class="bottom">
    Bottom pane content should not collapse or be pushed outside the bounds of 'container'.
  </div>
</div>

CSS:

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.top {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.left {
  width: 30%;
  min-width: 30%;
}

.right {
  flex-grow: 1;
  overflow-y: auto;
}

.rightInternal {
  display: flex;
  flex-direction: column;
}

.bottom {
  padding: 10px;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
}

The problem:

This works fine in Chrome but the content in 'top' grows outside the bounds of 'container' in IE and FF due to the large content. Setting a height on the content of 'top' either results in the footer being pushed off the bottom (height: 100%) or the content not expanding to fill the available vertical space (height: 100px, for example).

How can I create my desired layout?

Notes:

The JSFiddle example has been modified slightly to make container size nicely and to make everything colorful so it can be easily identified. In my actual environment, height 100% will make the container fill the visible space that it sits within, which is as desired.
There is no requirement for me to use flexbox.

Setting `min-height: 0` on `top` will fix this issue, and the dupe link explains it — Asons, Oct 03 '17 at 11:16
@LGSon thank you! `min-height: 0` does indeed fix it in FF, but not in IE. The explanation in the dupe link lead me to discover that `flex-basis:0px` fixed IE (but not FF). I'll use both. Thanks again. — Montgomery 'monty' Jones, Oct 03 '17 at 11:25
Working example: https://jsfiddle.net/Merryweather/c0b2vku5/5/ — Montgomery 'monty' Jones, Oct 03 '17 at 11:41

score 0 · Answer 1 · answered Oct 03 '17 at 11:07

I think you can achieve the layout you want using by adding overflow property to .top

Set overflow to hidden

jsfiddle

.container {
  width: 90%;
  height: 300px;
  background: rgba(255, 125, 125, 1);
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.top {
  width: 100%;
  background: rgba(238, 130, 238, 1);
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}

.left {
  width: 30%;
  min-width: 30%;
  background: rgba(135, 206, 250, 1);
  padding: 10px;
  margin: 10px;
}

.right {
  background: rgba(152, 251, 152, 1);
  padding: 10px;
  margin: 10px;
  flex-grow: 1;
  overflow-y: auto;
}

.rightInternal {
  display: flex;
  flex-direction: column;
}

.bottom {
  background: rgba(255, 255, 153, 1);
  padding: 10px;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
}

<div class="container">
  <div class="top">
    <div class="left">
      Top-left content
    </div>
    <div class="right">
      <div class="rightInternal">
        This rainbow should scroll!
        <br/>
        <br/>
        <div style="background-color:red;height:60px">Richard</div>
        <div style="background-color:orange;height:60px">of</div>
        <div style="background-color:yellow;height:60px">York</div>
        <div style="background-color:green;height:60px">gained</div>
        <div style="background-color:blue;height:60px">battle</div>
        <div style="background-color:indigo;height:60px">in</div>
        <div style="background-color:violet;min-height:60px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in congue ipsum. Suspendisse maximus non magna sed blandit. Fusce mattis nisl elit, a sollicitudin justo porta ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
          posuere cubilia Curae; Donec elementum nunc ac vehicula dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla ultricies ipsum dignissim quam venenatis, in vehicula eros ultrices. Maecenas ut malesuada
          nulla.
        </div>
      </div>
    </div>
  </div>
  <div class="bottom">
    Bottom pane content should not collapse or be pushed outside the bounds of 'container'.
  </div>
</div>

Scrollable container within flex layout

1 Answers1