mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 06:37:44 +00:00
LibWeb: Use fit-content width in place of indefinite flex item widths
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.
This commit is contained in:
parent
ca290b27ea
commit
af118abdf0
4 changed files with 79 additions and 56 deletions
|
@ -0,0 +1,15 @@
|
|||
<!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>
|
Loading…
Add table
Add a link
Reference in a new issue