最新的Chrome和Flexbox/溢出问题 [英] Problem with latest Chrome and Flexbox/overflow

问题描述

我们有一个包含很多子元素的div元素，但在Mac上的最新Chrome(79)中无法正确显示.我们有两个滚动条，看起来该列表占用了太多空间，并将titlePanel和actionPanel强制移出了视口.查看屏幕截图. 我们希望UI占据浏览器窗口的整个高度，我们希望list元素占据剩余的空间并在其中具有滚动条.

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.

正确:

不正确(请注意两个蓝色面板和两个滚动条):

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

在Chrome 78之前，它一直可以正常工作，但在Mac上的最新Safari中仍然可以正常工作.我们还在最新的iOS上的Chrome/Safari上进行了测试，在这里也可以使用.它不适用于Mac和Samsung S10上的最新Chrome，因此我们希望Chrome的最新更新已进行了一些更改.

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.

但是，我不确定我们的HTML/CSS是否正确.我们可以通过在contentPanel中添加overflow-y:auto来解决此问题，但我希望list元素上的溢出足够(在最新的Chrome更新之前就是这种情况).

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).

我们的HTML/CSS不好吗，还是最新的Chrome浏览器有问题?

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>

推荐答案

html/css的一个问题是您的contentPanel具有100％height，并且在下面还有另一个同级元素(actionPanel).总高度超过100％，因此您得到了外部滚动条.

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.

一种快速解决方案是将actionPanel放在contentPanel内.

A quick-fix is to put actionPanel inside contentPanel.

或使contentPanel的高度减小. 例如height: calc(100% - 18px);

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

这篇关于最新的Chrome和Flexbox/溢出问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！