mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 07:47:35 +00:00
LibWeb: Clamp fit-content widths in flex layout to min/max-width
In situations where we need a width to calculate the intrinsic height of a flex item, we use the fit-content width as a stand-in. However, we also need to clamp it to any min-width and max-width properties present.
This commit is contained in:
parent
4c090a9a35
commit
c0a7a61288
4 changed files with 58 additions and 4 deletions
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html><html><head><style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font: 60px SerenitySans;
|
||||
}
|
||||
html {
|
||||
background: white;
|
||||
}
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 600px;
|
||||
background: pink;
|
||||
}
|
||||
.header {
|
||||
max-width: 400px;
|
||||
background: orange;
|
||||
}
|
||||
</style></head><body class="hero"><div class="header">This entire text should be on an orange background.</div></body></html>
|
Loading…
Add table
Add a link
Reference in a new issue