1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 07:47:35 +00:00

LibWeb: Resolve flex item percentages against used flex container sizes

Once we've resolved the used flex item width & height, we should allow
percentage flex item sizes to resolve against them instead of forcing
flex items to always treat percentages as auto while doing intrinsic
sizing layout.

Regressed in 8dd489da61.
This commit is contained in:
Andreas Kling 2023-07-17 21:19:33 +02:00
parent edd7de3c77
commit ac124fbaae
6 changed files with 126 additions and 56 deletions

View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x120 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 54x102 children: not-inline
Box <div.flex> at (11,11) content-size 52x100 flex-container(column) [FFC] children: not-inline
BlockContainer <div.hmm> at (12,12) content-size 50x17.46875 flex-item [BFC] children: inline
line 0 width: 39.78125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [12,12 39.78125x17.46875]
"Hello"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<style>
* {
border: 1px solid black;
background: none;
color: black;
}
.flex {
display: flex;
flex-direction: column;
background: pink;
height: 100px;
}
.hmm {
max-width: 100%;
width: 50px;
background: orange;
}
body {
width: max-content;
background: white;
}
</style>
<body><div class="flex"><div class="hmm">Hello</div>