Overflow difference between Chrome and Firefox in grid container

Question

The code below has different behaviors in Chrome (Version 71.0.3578.98 (Official Build) (64-bit)) and Firefox (64.0 (64-bit)). Essentially the red box fits well in Firefox, but the red box goes out of the parent in Chrome. I wonder whether it is a bug in Chrome or I did something wrong.

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>

Michael Benjamin · Accepted Answer · 2018-12-29T00:02:02.127

The problem is related to the use of percentage heights:

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

In CSS, traditionally, a percentage height on an element can only work if there exists a defined height on the parent (as a reference point).

Chrome and Safari still adhere to this rule. They need a defined height on the parent for a percentage height to work on the child.

Firefox and Edge do not anymore. They now take whatever height is computed as a valid reference for the percentage height on the child.

This works across browsers:

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>

More detailed explanations:

This explains the problem. But I'm actually making the outer box resizable. So I cannot give the content any fixed height. However, the userContent is ok to have a fixed height. The actual code is here: http://az.ht/ui/build/curr/, checkout the tabs and window. Currently I'm using grid. But I don't understand why window works well, but tabs doesn't work. Now I have to switch to flex, which works well: https://jsbin.com/favuwec/edit?html,output. I'm kind of disappointed that grid doesn't work and I have to use flex box in this case. — , Dec 30 '18 at 08:31
Though I don't know why, the problem is solved by adding this line at the top : ` ` https://jsbin.com/qecolug/4/edit?html,output — , Jan 05 '19 at 06:03

score 0 · Answer 2 · answered Jan 05 '19 at 06:03

0

Though I don't know why, the problem is solved by adding this line at the top : <!DOCTYPE html> https://jsbin.com/qecolug/4/edit?html,output

answered Jan 05 '19 at 06:03

Overflow difference between Chrome and Firefox in grid container

2 Answers2