Why Do These Inline-block Divs Not Fit Inside Their Container?

This fiddle is a result of this question. In it, I have a 3 div flexbox and a 4 div flexbox. (At this moment, it has nothing to do with Angular) Ideally the flex divs would fit i

Solution 1:

The space between the elements cause extra width. You need to put all your elements on one line, like this:

<divflex=1style="...">This is the A Bo</div><div...>This is the B Box</div>...

Solution 2:

basically, its because of white-space in your markup (new lines are treated as white space in inline-block elements). they are causing an extra space.

there is a grate article aboute how to fight the space between inline-block elements, you have a lot of different solutions.