Css - Scroll Issue With Flexbox And Max-height

I'm facing a strange issue that might have link with flexbox misbehaving with max-height, but so far I didn't find any pure css solution. I made a plunker to summarize the problem

Solution 1:

It is a bug, in Chrome, a test in FF and Edge, it works fine.

Since you use full viewport height, change the max-height: 40%; to max-height: 40vh;.

Another way, as in below sample, is to change the 100% in height: 100% to 100vh.

I guess this works better because viewport units like vh is a fixed unit, which percent is not.

Plnkr demo: https://plnkr.co/edit/66W4a2lOI58XLudCmkw9?p=preview

html {
  height: 100vh;
}
body {
  height: calc(100vh - 16px);
}
.main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

.max,
.all {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-y: auto;
}
.max {
  flex: 01 auto;
  min-height: 103px;
  max-height: 40%;
  background-color: green;
}
.all {
  flex: 11 auto;
  min-height: 235px;
  background-color: blue;
}

.content {
  flex: 00 auto;
  box-sizing: border-box;
  height: 200px;
  margin: 5px;
  border: 1px dashed black;
  background-color: white;
}

<divclass="main"><divclass="max"><divclass="content"></div></div><divclass="all"><divclass="content"></div></div></div>

Solution 2:

Yes it feels buggy. If you increase the height of the window the height of the first box does not get updated unless:

• you decrease the height again
• "put your mouse over it" (did not quite get your meaning here)

IMHO this is a browser bug.

If you set flex-grow to anything greater 0 for the first box, the height gets updated correctly, if you increase the height of the window (as you would expect) But using flex-grow isn't an option as the box could potentially grow bigger than its content.

Rather than using max-height:40% you should use the exact same height as you use for .content and use flex-grow: 1 as well to circumvent the "browser bug"