css - 网格容器中 Chrome 和 Firefox 的溢出区别

Question

下面的代码在 Chrome(版本 71.0.3578.98(官方构建)(64 位))和 Firefox(64.0(64 位))中有不同的行为。本质上红框在 Firefox 中很合适，但红框在 Chrome 中脱离了父级。我想知道这是 Chrome 中的错误还是我做错了什么。

https://jsbin.com/qecolug/3/edit?html,output

div {
  box-sizing: border-box;
  border: 1px solid gray;
}

div.outer {
  display: grid;
  grid-template-rows: 36px 1fr;
  height: 100px;
}

div.header {
  grid-row: 1/2;
}

div.content {
  grid-row: 2/3;
  overflow: hidden;
}

div.userContent {
  border: 1px solid tomato;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
}

<div class="outer">
  <div class="header">Header</div>
  <div class="content">
    <div class="userContent">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium aperiam quo sapiente obcaecati. Tenetur, eveniet sit explicabo dolore numquam impedit nesciunt qui magnam nisi maiores voluptate officiis, excepturi praesentium!</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem natus hic minus obcaecati? Quidem id repellat vitae! Cupiditate, expedita laborum officia culpa nostrum corrupti incidunt ullam consequatur quidem impedit illum.</p>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non nihil rerum nobis, corrupti quae quisquam saepe. Rem eum exercitationem error provident, ipsum voluptatum aperiam inventore, numquam, quo tenetur ad ea!</p>
    </div>
  </div>
</div>

Answer 1

问题与百分比高度的使用有关:

div.userContent {
    border: 1px solid tomato;
    box-sizing: border-box;
    height: 100%; <---------------- problem
    overflow: auto;
}

传统上，在 CSS 中，元素上的百分比高度只有在父元素上存在定义的高度(作为引用点)时才有效。

Chrome 和 Safari 仍然遵守这个规则。他们需要在父项上定义高度，以便在子项上工作的百分比高度。

Firefox 和 Edge 不再支持。他们现在将计算的任何高度作为 child 高度百分比的有效引用。

这适用于跨浏览器:

div.outer {
  display: grid;
  grid-template-rows: 36px 1fr;
  height: 100px;
}

div.content {
  grid-row: 2/3;
  overflow: hidden;
  height: calc(100px - 36px); /* the missing link between .outer and .userContent */
}

div.userContent {
  border: 1px solid tomato;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
}

div.header {
  grid-row: 1/2;
}

div {
  box-sizing: border-box;
  border: 1px solid gray;
}

<div class="outer">
  <div class="header">Header</div>
  <div class="content">
    <div class="userContent">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium aperiam quo sapiente obcaecati. Tenetur, eveniet sit explicabo dolore numquam impedit nesciunt qui magnam nisi maiores voluptate officiis, excepturi praesentium!</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem natus hic minus obcaecati? Quidem id repellat vitae! Cupiditate, expedita laborum officia culpa nostrum corrupti incidunt ullam consequatur quidem impedit illum.</p>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non nihil rerum nobis, corrupti quae quisquam saepe. Rem eum exercitationem error provident, ipsum voluptatum aperiam inventore, numquam, quo tenetur ad ea!</p>
    </div>
  </div>
</div>

更详细的解释:

• Chrome / Safari not filling 100% height of flex parent
• Why is percentage height not working on my div?