mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 17:52:45 +00:00
af118abdf0
In `flex-direction: column` layouts, a flex item's intrinsic height may depend on its width, but the width is calculated *after* the intrinsic height is required. Unfortunately, the specification doesn't tell us exactly what to do here (missing inputs to intrinsic sizing is a common problem) so we take the solution that flexbox applies in 9.2.3.C and apply it to all intrinsic height calculations within FlexFormattingContext: if the used width of an item is not yet known when its intrinsic height is requested, we substitute the fit-content width instead. Note that while this is technically ad-hoc, it's basically extrapolating the spec's suggestion in one specific case and using it in all cases.
15 lines
348 B
HTML
15 lines
348 B
HTML
<!DOCTYPE html><html><head><style>
|
|
* {
|
|
border: 1px solid black;
|
|
font: 80px SerenitySans;
|
|
}
|
|
.hero {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 500px;
|
|
}
|
|
.upper {
|
|
background: orange;
|
|
}
|
|
</style></head><body class="hero"><div class="upper">This entire text should be on orange background.</div></div>
|