CODEWITHSUNDEEP
htmlcssscrollbarflexbox
Dacre-Wright Jean-Eudes
Dacre-Wright Jean-Eudes

Reputation: 13

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. If you resize your window to reduce its height, at some point you should have a scrollbar in the first block, but if you get back to a higher height, even if there is enough space, the scrollbar won't disappear unless you put your mouse over it (which feels very bugy) : https://plnkr.co/edit/VsJ7Aw8qZdSM1iJeL7Bj?p=preview

I have a main container (in flex) containing 2 blocks (also in flex).
The main container has its height set to 100%, allowing it to resize itself following the window size.
Both children have a fixed content and an overflow-y set to auto.
The first child has a max-height in % to let more height to the second child.

The issue seems to come from this max-height rule. If you remove it, then there's no problem, but I need this max-height...
I don't want to use something like:

.max { flex: 1 1 auto; }
.all { flex: 3 1 auto; }

because it would make my first block higher than its content depending on the window size. I want the first block to have at most its content height.

So my question is: Is it an implementation issue in many browsers (maybe all, but I only tested it in Chrome, IE10 and IE11), or is something wrong in my logic ? Thank you.

UPDATE: I used a fixed height for my content in this example, but in my project it's a list of n elements in it. So I can't really set my max-height with px value.

UPDATE2: I can't use vh in .max max-height property because it takes 100vh as 100% of viewport height (basically your browser window height). But in my context, .main is already in other containers. Those containers have already their heights defined and are smaller than my window height.

/* Styles go here */

html {
  height: 100%;
}
body {
  height: calc(100% - 16px);
}
.main {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.max,
.all {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-y: auto;
}
.max {
  flex: 0 1 auto;
  min-height: 103px;
  max-height: 40%;
  background-color: green;
}
.all {
  flex: 2 1 auto;
  min-height: 235px;
  background-color: blue;
}
.content {
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 200px;
  margin: 5px;
  border: 1px dashed black;
  background-color: white;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="main">
    <div class="max">
      <div class="content"></div>
    </div>
    <div class="all">
      <div class="content"></div>
    </div>
  </div>
</body>
</html>

Upvotes: 1

Views: 6327

Answers (2)

Asons
Asons

Reputation: 87211

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: 0 1 auto;
  min-height: 103px;
  max-height: 40%;
  background-color: green;
}
.all {
  flex: 1 1 auto;
  min-height: 235px;
  background-color: blue;
}

.content {
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 200px;
  margin: 5px;
  border: 1px dashed black;
  background-color: white;
}
<div class="main">
  <div class="max">
    <div class="content"></div>
  </div>
  <div class="all">
    <div class="content"></div>
  </div>
</div>

Upvotes: 3

Michael Maa&#223;
Michael Maa&#223;

Reputation: 104

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"

Upvotes: 0

Related Questions