网格容器中 Chrome 和 Firefox 的溢出区别答案

【问题标题】：Overflow difference between Chrome and Firefox in grid container网格容器中 Chrome 和 Firefox 的溢出区别
【发布时间】：2018-12-28 23:19:16
【问题描述】：

以下代码在 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>

【问题讨论】：

标签： css google-chrome firefox css-grid

【解决方案1】：

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

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

在 CSS 中，传统上，元素的百分比高度只有在父元素上存在定义的高度（作为参考点）时才有效。

Chrome 和 Safari 仍然遵守此规则。他们需要在父节点上定义高度，以便百分比高度在子节点上起作用。

Firefox 和 Edge 不再支持。他们现在将计算的任何高度作为孩子身高百分比的有效参考。

这适用于浏览器：

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>

更详细的解释：

【讨论】：

这解释了问题。但我实际上正在使外框可调整大小。所以我不能给内容任何固定的高度。但是， userContent 可以有一个固定的高度。实际代码在这里：az.ht/ui/build/curr，查看选项卡和窗口。目前我正在使用网格。但我不明白为什么窗口工作得很好，但标签不起作用。现在我必须切换到 flex，效果很好：jsbin.com/favuwec/edit?html,output。我对网格不起作用感到有点失望，在这种情况下我必须使用弹性框。
虽然我不知道为什么，但是通过在顶部添加这一行来解决问题：<!DOCTYPE html>jsbin.com/qecolug/4/edit?html,output

【解决方案2】：

虽然我不知道为什么，但是通过在顶部添加这一行来解决问题：<!DOCTYPE html>https://jsbin.com/qecolug/4/edit?html,output

【讨论】：