Make child flexbox container scrollable

Question

I want to use a full-height app using flexbox, white area which is a flex item needs to be scrollable in my case, however it doesn't seem to be working, see this jsfiddle.

html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.left {
  background: yellow;
  margin: 10px;
  flex: 0 0 50px;
}
.right {
  background: blue;
  margin: 10px 10px 10px 0;
  flex: 1 0 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sub-header {
  flex: 0 0 auto;
  margin: 10px;
  background: #999999;
}
.context {
  flex: 1 0 auto;
  overflow-y: auto;
  margin: 0 10px 10px 10px;
  background: white;
}

<header style='background: red; flex: 0 0 auto'>
  This is Mmain header
</header>
<main style='background: green; flex: 1 0 auto; display:flex;'>
  <div class='left'>
    left pannel
  </div>
  <div class='right'>
    <div class='sub-header'>
      This is sub header
    </div>
    <div class='context'>
      <div style='height: 3000px;'>

      </div>
    </div>
  </div>
</main>

How can I make the white area scrollable?

Answer 1

#1 - With position: absolute

An easy way to prevent the extra long div from stretching its parent is to make it position: absolute and relative to its .context parent.

• The body is given 100vh and the main is given an inital height of 100% which will shrink to fit the body evenly

• The header is given flex: 0 0 25px so will remain its fixed height

Working Example

* {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {
  background: red;
  flex: 0 0 25px;
}
main {
  background: green;
  display: flex;
  flex: 1 1 100%;
}
.left {
  background: yellow;
  flex: 0 0 50px;
  margin: 10px;
}
.right {
  background: blue;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.sub-header {
  background: #999999;
  margin: 10px;
}
.context {
  background: white;
  overflow-y: scroll;
  margin: 0 10px 10px;
  position: relative;
  flex: 1;
}
.context > div {
  height: 3000px;
  position: absolute;
}

<header>
  This is main header
</header>
<main>
  <div class='left'>
	left panel
  </div>
  <div class='right'>
	<div class='sub-header'>
	  This is sub header
	</div>
	<div class='context'>
	  <div>
		Super long div
	  </div>
	</div>
  </div>
</main>

---

#2 - Original - Flexible heights

Main points:

• The header and main elements don't need to be flex children of body. They can be controlled with flexible heights.

• Give the header and main a height in viewport height units (vh). Make sure that the height of header + main = 100

• .context gets overflow-y: scroll. None of the other elements require an overflow property

• .context and .sub-header have the flex property removed in this example. If the flex property is used, don't have an initial value of auto on the context div, otherwise the overflow scroll will break and spill outside the viewport.

Working Example

* {
  margin: 0;
  padding: 0;
}
header {
  background: red;
  height: 10vh;
}
main {
  background: green;
  display: flex;
  height: 90vh;
}
.left {
  background: yellow;
  flex: 0 0 50px;
  margin: 10px;
}
.right {
  background: blue;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.sub-header {
  background: #999999;
  margin: 10px;
}
.context {
  background: white;
  overflow-y: scroll;
  margin: 0 10px 10px;
}
.context > div {
  height: 3000px;
}

<header>
  This is main header
</header>
<main>
  <div class='left'>
	left panel
  </div>
  <div class='right'>
	<div class='sub-header'>
	  This is sub header
	</div>
	<div class='context'>
	  <div>
		Super long div
	  </div>
	</div>
  </div>
</main>