mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 07:22:45 +00:00
c0a7a61288
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.
22 lines
No EOL
547 B
HTML
22 lines
No EOL
547 B
HTML
<!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> |