<div class="wrapper">
<div class="gold"><code>flex-grow: <strong>1</strong>;</code></div>
<div class="red"><code>flex-grow: <strong>10</strong>;</code></div>
<div class="blue"><code>flex-grow: <strong>3</strong>;</code></div>
</div>
* {
box-sizing: border-box;
}
.wrapper {
font-family: monospace;
color: #fff;
border: 2px solid #ddd;
display: flex;
height: 250px;
}
.wrapper > div {
padding: 56px 0;
font-weight: 700;
font-size: 1em;
text-align: center;
}
.gold {
background-color: gold;
flex-grow: 1;
}
.red {
background-color: red;
flex-grow: 10;
}
.blue {
background-color: steelblue;
flex-grow: 3;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.