Почему не работает min-height?

<div class="item">
     <div>Текст, который должен растягивать блок по высоте при переходе на другую строку</div>
</div>


.item {
	display: table;
}

.item div {
	display: table-cell;
	vertical-align: middle;
	min-height: 50px;
}

Вроде как таблица должна в любом случае растягиваться по содержимому и говорят просто использовать height, и все будет работать будто задано min-height, но не работает. При фиксированной высоте текст выходит за пределы блока, а при указании min-height параметр просто игнорируется.
  • Вопрос задан
  • 1282 просмотра
Пригласить эксперта
Ответы на вопрос 1
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.

источник: www.w3.org/TR/CSS21/visudet.html#propdef-max-height

The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's computed 'height', the computed 'height' of each cell in the row, and the minimum height (MIN) required by the cells. A 'height' value of 'auto' for a 'table-row' means the row height used for layout is MIN. MIN depends on cell box heights and cell box alignment (much like the calculation of a line box height). CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values. CSS 2.1 does not define the meaning of 'height' on row groups.

In CSS 2.1, the height of a cell box is the minimum height required by the content. The table cell's 'height' property can influence the height of the row (see above), but it does not increase the height of the cell box.

источник: www.w3.org/TR/CSS21/tables.html#height-layout
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы