Разница переполнения между Chrome и Firefox в сеточном контейнере - PullRequest
Новая
       11

Разница переполнения между Chrome и Firefox в сеточном контейнере

0 голосов
/ 29 декабря 2018

Код ниже имеет различные поведения в 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>

Ответы [ 2 ]

0 голосов
/ 05 января 2019

Хотя я не знаю почему, проблема решается добавлением этой строки вверху: <!DOCTYPE html> https://jsbin.com/qecolug/4/edit?html,output

0 голосов
/ 29 декабря 2018

Проблема связана с использованием процентных высот: 

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>

Более подробные объяснения:

...