Элемент не толстеет от aspect-ratio

Question

Почему div'ы с высотой по контенту не квадратные в случаях, когда высота превышает ширину (4й, 7й и 8й)?

div {
  aspect-ratio: 1;
  outline: 1px solid red;
  margin: 0 1em 1em 0;
  float: left;
  line-height: 1;
}

img {
  display: block;
}

<div>12345678</div>
<div style="width: 8ch">w</div>
<div style="height: 8ch">h</div>
<div>1<br>2<br>3<br>4</div>
<div><img src="//placehold.co/64"></div>
<div><img src="//placehold.co/64x32"></div>
<div><img src="//placehold.co/32x64"></div>
<div><img src="//placehold.co/32x64" height="64"></div>

Answer 1

https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum параграфы 4.3 и 4.4.

Если грубо, то когда оба измерения не заданы, то высота определяется по ширине, но при этом если не задан явно min-height или блок не «прокручиваемый» (не задан overflow), то минимальная высота блока задаётся по его максимальной высоте, что бы не обрезалось содержимое.

Если задать overflow: auto, то будут квадратики с прокруткой.

Если задать min-height: 0, то будут квадратики с переполнением.

div>div {
  aspect-ratio: 1;
  outline: 1px solid red;
  margin: 0 1em 1em 0;
  float: left;
  line-height: 1;
}

div.overflow>div {
  overflow: auto;
}

div.min-height>div {
  min-height: 0;
}

img {
  display: block;
}

<div class="overflow">
  <div>12345678</div>
  <div>111<br>222<br>333<br>444<br>555</div>
  <div><img src="//placehold.co/64x32"></div>
  <div><img src="//placehold.co/32x64" height="64"></div>
</div>
<div class="min-height">
  <div>12345678</div>
  <div>111<br>222<br>333<br>444<br>555</div>
  <div><img src="//placehold.co/64x32"></div>
  <div><img src="//placehold.co/32x64" height="64"></div>
</div>

БЛОГ НА HUSL

Элемент не толстеет от aspect-ratio

Ответы (1 шт):