在Firefox和Chrome 48中使用flexbox出现渲染问题

一尘不染

在Firefox和Chrome 48中使用flexbox出现渲染问题

html

在chrome 47上（正确的行为）： 在chrome 47上，div .scroll正确滚动，使用flex调整高度为100％。

在Firefox（错误的行为）上： 在Firefox上，与div一起.scroll使用的是内容高度，并且滚动不正确。

跨浏览器解决此问题的方法是什么？

for (var i = 0; i < 100; i++)

  $(".scroll").append("Dynamic content<br>");


body,

html {

  margin: 0;

  padding: 0;

}

.container {

  box-sizing: border-box;

  position: absolute;

  height: 100%;

  width: 100%;

  display: flex;

  flex-direction: column;

}

.content {

  background: yellow;

  flex: 1;

  display: flex;

  flex-direction: column;

}

.scroll {

  flex: 1 1 auto;

  overflow: scroll;

}


<div class="container">



  <div class="bar">Small</div>



  <div class="content">



    <div>Static content</div>

    <div class="scroll"></div>

    <div>Static content</div>



  </div>



  <div class="footer">Small</div>



</div>

已更新问题， 以区分Chrome 47和Chrome 48。

阅读 262

2020-05-10

共1个答案

一尘不染

更新了flexbox规范，使flex项目的默认最小大小等于内容的大小：min-width: auto/ min-height: auto。

您可以使用min-width: 0/ 覆盖此设置min-height: 0：

.content {
    background: yellow;
    flex: 1;
    display: flex;
    flex-direction: column;

    min-height: 0;           /* NEW */
    min-width: 0;            /* NEW */
}

以下是规范的一些详细信息：

4.5。弹性项目的隐含最小大小

为了为弹性商品提供更合理的默认最小尺寸，此规范引入了一个新auto值作为CSS 2.1中定义的min-width和min- height属性的初始值。

更新

Chrome似乎已更新了其渲染行为。Chrome 48现在在最小伸缩大小方面模仿了Firefox。

根据以下链接中的报告，以上解决方案也应在Chrome 48中运行。

2020-05-10