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

标签 css google-chrome firefox css-grid

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

最佳答案

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

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>

更详细的解释:

关于css - 网格容器中 Chrome 和 Firefox 的溢出区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53965326/

相关文章:

html - 点击ngFor li的 Angular 变化背景

c# - 开发者工具 (F12) Internet Explorer 空控制台,但 Firefox 不支持

javascript - Firefox 删除持久性 Cookie

php - fontello 不适用于 wordpress 下划线主题

html - 读取 : Line up object outside a table with column inside a table

php - 为什么 PHP rand() 在 chrome 中抛出 2 个不同的值

google-chrome - 有没有办法在 Chrome 或 Firefox 关闭时显示桌面通知?

windows - 如何在 Windows 中创建 Chrome 风格的程序自更新?

python - 使用 selenium webdriver 获取浏览器版本

javascript - 如何在带有 <span> 的 html 中创建一个新的 <li>