1
Fork 0
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:
Andreas Kling 2023-03-28 18:29:12 +02:00
parent 4c090a9a35
commit c0a7a61288
4 changed files with 58 additions and 4 deletions

View file

@ -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>