Problem with latest Chrome and Flexbox/overflow

We have a div element with lots of sub elements and this is not displaying correctly in latest Chrome (79) on Mac. We are getting two scrollbars and it looks like the list is taking up too much space and forcing the titlePanel and actionPanel out of the viewport. See screenshots. We want the UI to take up the full height of the browser window, and we want the list element to take up remaining space and have a scrollbar inside it.

Correct:

Not correct (notice the two blue panels and the two scroll bars):

This used to work fine up till Chrome 78 and is still working fine in latest Safari on Mac. We have also tested on Chrome/Safari on latest iOS and here it also works. It does NOT work on latest Chrome on Mac and on Samsung S10, so we expect that the latest update of Chrome has introduced some changes.

However, I'm not completely sure that our HTML/CSS is correct. We are able to fix the issue by adding overflow-y:auto to the contentPanel, but I expected the overflow on the list element to be sufficient (which was the case until latest Chrome update).

Is our HTML/CSS bad or is there an issue with latest Chrome?

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  min-height: 100%;
}

.container {
  width: 100%;
  height: 100%;
}

.mainPanel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  background: blue;
}

.contentPanel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;

   /*overflow-y:auto*/;
}

.titlePanel {
  flex: 0 0 auto; 
}
.actionPanel {
  flex: 0 0 auto;
}

.list {
  height:100%;
  overflow-y:auto;
  background:tomato;
}

<div class="container">
  <div class="mainPanel">
    <div class="contentPanel">
      <div class="titlePanel">TITLE</div>
      <div class="list">
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
      </div>
    </div>
    <div class="actionPanel">Actions</div>
  </div>
</div>

回答1:

One issue with your html/css is that your contentPanel has 100% height and you have another sibling element (actionPanel) underneath. The total height is over 100%, so you get that outer scrollbar.

A quick-fix is to put actionPanel inside contentPanel.

Or make the contentPanel take less height. e.g. height: calc(100% - 18px);

回答2:

Just wanted to chime in with another possible solution. I have struggled with this issue for several hours (that's how I got here), and indeed it only happens on Mac after having updated Chrome yesterday.

What I ended up doing was to replace height: 100% on .list with:

flex: 1 1 auto;
height: 0;

This seems to do the trick for Chrome 79 and it still works as intended on Chrome on Windows and Safari. I haven't tested it in other browsers, so you might want to do that.

回答3:

I tried to remove all height properties from your code and it worked well as you mentioned in the first image displayed. Maybe setting only one container div to height: 100%; will assure your desired result