CodePark/ questions / Flexbox
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Flexbox

The container is 600px wide with no padding, border or gap, and the items contain only a short word. How wide is .b?

.row { display: flex; width: 600px; }
.a { flex: 1 1 100px; }
.b { flex: 2 1 100px; }
.c { flex: 1 1 100px; }
250px

250px is right. The bases total 300px, so 300px of free space is left. The free space is split by the grow factors 1:2:1, so .b gets 150px extra. Its 100px basis plus 150px gives 250px.

300px is the tempting wrong answer. It would be right only with flex-basis: 0. Then the whole 600px would be split 1:2:1.