I have a flexbox
with two children. I want both children to have equal size, despite that one has padding and the other doesn't.
Here's a demo. I want the blue and green boxes to be equal in size:
html, body, .container {
margin: 0;
width: 100%;
height: 100%;
}
.container {
display: flex;
}
.container div {
flex: 1;
min-width: 0;
flex-basis: 0;
}
.first {
background: cornflowerblue;
}
.second {
background: lightgreen;
padding: 100px;
}
<div class="container">
<div class="first"> </div>
<div class="second"> </div>
</div>
I know that I could use width: 50%
, but that's not direction-agnostic and breaks if I add more elements.
flex: 1
, that is equivalent toflex-grow: 1
,flex-shrink: 1
andflex-basis: 0
. So addingflex-basis: 0
later in the code is redundant.