box-sizing property determines how the sizing properties are applied. It can take 2 values content-box and border-box
content-box is the default value. Affects the content box of the element and padding and border are additional.
The child divs have the half size, plus 10px the border. That is why the second child goes below. Div 150 px plus border 10 px both sides total 160 px
border-box – the sizing properties are used to set the whole size of the element
The divs have the half size 150 px, and the border width is 10 px both sides. But the total size of the element is still 150 px
- CSS – flexbox and align-self, order
- CSS – flexbox and align-content
- CSS – flexbox and align-items property