mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 04:22:45 +00:00
41e7c5766e
This stuff is pretty hairy since the specifications don't give any guidance on which widths to use when calculating the intrinsic height of flex items in a column layout. However, our old behavior of "treat anything indefinite as fit-content" was definitely not good enough, so this patch improves the situation by considering values like `min-content`, `max-content` and `fit-content` separately from `auto`, and making the whole flex layout pipeline aware of them (in the cross axis context).
19 lines
704 B
HTML
19 lines
704 B
HTML
<!doctype html><style>
|
|
* { border: 1px solid black; }
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.auto { width: auto; }
|
|
.px { width: 200px; }
|
|
.percentage { width: 50px; }
|
|
.max-content { width: max-content; }
|
|
.min-content { width: min-content; }
|
|
.fit-content { width: fit-content; }
|
|
.inner { display: flex; }
|
|
</style><body>
|
|
<div class="px"><div class="inner">px</div></div>
|
|
<div class="percentage"><div class="inner">percentage</div></div>
|
|
<div class="fit-content"><div class="inner">fit content</div></div>
|
|
<div class="max-content"><div class="inner">max content</div></div>
|
|
<div class="min-content"><div class="inner">min content</div></div>
|