I created 3 boxes using css flexbox in html but Chrome is rendering the boxes with different sizes.
Drag the border of the browser to make the view smaller.
Thanks for your help!
Codepen: https://codepen.io/labanino/pen/rGaNLP
body {
font-family: Arial;
font-size: 2rem;
text-transform: uppercase;
}
.flex {
height: 200px;
display: flex;
flex-direction: row;
}
.flex>section {
flex: 1 1 auto;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
.flex>section:nth-child(1) {
background: brown;
margin-right: 20px;
border: 1px solid #999;
}
.flex>section:nth-child(2) {
background: pink;
margin-right: 20px;
border: 1px solid #999;
}
.flex>section:nth-child(3) {
background: green;
margin-right: 0;
border: 1px solid #999;
}<div class="flex">
<section>Brown</section>
<section>Pink</section>
<section>Green</section>
</div>