How Big Is That Box? Understanding Sizing In CSS Layout

A key feature of Flexbox and Grid Layout is that they can deal with distributing available space between, around and inside grid and flex items. Quite often this just works, and we get the result we were hoping for without trying very hard. This is because the specifications attempt to default to the most likely use cases. Sometimes, however, you might wonder why something ends up the size that it is.
Articles on Smashing Magazine — For Web Designers And Developers