mirror of
https://github.com/RGBCube/serenity
synced 2025-05-31 11:38:11 +00:00
0ef07383e5
When resolving these constraints to CSS pixel sizes, we have to resolve padding-top and padding-bottom against the flex container's *width*, not its height.
20 lines
333 B
HTML
20 lines
333 B
HTML
<style>
|
|
* {
|
|
border: 1px solid black;
|
|
}
|
|
.flex-container {
|
|
display: flex;
|
|
width: 600px;
|
|
height: 10px;
|
|
}
|
|
.flex-item {
|
|
background: orange;
|
|
box-sizing: border-box;
|
|
min-height: 200px;
|
|
padding-top: 10%;
|
|
padding-bottom: 20%;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="flex-container">
|
|
<div class="flex-item">foo</div>
|