Странное поведение заполнения регулярного div внутри таблицы-ячейки div

Question

Так что сегодня я столкнулся с странной проблемой, это происходит только в Chrome. Взгляните на скрипку: https://jsfiddle.net/m1npLfcm/1/

<div class="table"> 
    <div class="row"> 
     <div class="cell"> 
      <div class="content"> 
      </div> 
     </div> 
    </div> 
</div> 

Существует несколько основных сервировки стола выполнены из DIVs, таблицы, строки и ячейки. Все они имеют ширину и высоту 100%. Внутри камеры есть регулярный DIV. Он имеет 100% ширину и высоту, а также некоторые дополнения.

Как мы все знаем, по умолчанию размер окна: контент-поле для div будет толкать границы этим дополнением. Поэтому я сделал это размер окна: border-box, как я обычно делаю, и теперь у меня такое странное поведение.

Похоже, что в этой ситуации размер окна: контент-поле применяется только к ширине и высоте, по умолчанию просто отлично, не нажимая границы. Однако, если я добавлю размер коробки: border-box - ширина будет работать нормально, но высота получает полное вертикальное дополнение, вычитаемое из него, как если бы предыдущий контент-ящик действовал так, как должно было быть.

Просто, черт возьми, это так? Это происходит только в Chrome, и я совершенно смущен. Кто-нибудь видел это раньше и как это следует лечить? Краткая работа в googling не помогла, так как этот вопрос довольно сложно описать в нескольких словах.

Answer 1

Если вы видите, что заполнение 20px - это высота, о которой вы говорите, поскольку в ячейке нет элементов или содержимого, браузер оставляет за собой только дополнение.

В вашей скрипке я играл с заполнением содержимого и умел фиксировать высоту с размером (красным) со значением, которое я хочу.

Я надеюсь, что это поможет вам.

Answer 2

К сожалению, дополнительный div, обернутый вокруг .content, требуется с классом .inner, который будет служить в качестве дополнения к содержимому.

В this codepen я немного изменился КСС вашей скрипки:

• набора box-sizing: border-box ко всем элементам, так как это важно
• заменил .cell с .inner (поддерживается только вечнозелеными браузерами, в IE < = 10 .cell обертка должна оставаться)
• удаляет чрезмерный width: 100% для элементов уровня блока

Границы/обивка применяется правильно до тех пор, как красный фон из .table покрыт нечетного поведения .inner