I am using box-sizing: border-box;
with varying border
thicknesses within a flexbox. I want the elements within the flexbox to have equal widths, but it calculates the width
of the element without the borders.
Here is an example: the width
of my container is 100px
, so each element should be 20px
; however they are 19.2px
(x4) and 23.2px
.
.container {
display: flex;
flex-direction: row;
align-items: center;
width: 100px;
}
.container .block {
height: 28px;
flex: 1;
border: 1px solid black;
box-sizing: border-box;
}
.container .block.selected {
border: 3px solid blue;
}
<div class="container">
<span class="block">0</span>
<span class="block">1</span>
<span class="block selected">2</span>
<span class="block">3</span>
<span class="block">4</span>
</div>
See Question&Answers more detail:os