Flex Items With Same Property Values Are Rendering In Different Sizes

I'm using Flexbox to make a responsive site (first time I've done either of those, bear in mind) and it was all going well until I realised at some point that flex items with the s

Solution 1:

You've got a padding: 10px in #contentbox (middle row) which doesn't exist in other rows.

Add box-sizing: border-box to #contentbox to factor in that extra space.

Also, just because the flex rule is the same for multiple elements, doesn't mean the size of each box will be the same in each row.

The flex-grow and flex-shrink properties work by distributing free space in the container. In other words, they use the space which the content is not using. Because your content is different in each row, the available space will be different and, therefore, the size of each box can be different.

If you simply focus on the flex-basis component of the flex shorthand (and add the box-sizing: border-box as I mentioned above), the columns will align.

Revised Fiddle

As to why your layout disappears to the right when you re-size the window smaller, bear in mind that flex items, by default, cannot be smaller than the size of their content (regardless of any flex-shrink value). You'll need to override this initial setting with min-width: 0 (see reference below).

References:

• flex-grow not sizing flex items as expected
• What are the differences between flex-basis and width?
• How does flex-shrink factor in padding and border-box?
• Why doesn't flex item shrink past content size?
• box-sizing: border-box

Solution 2:

You've set a different flex-basis for the columns, while specifying their flex property. In order to keep the items perfectly aligned, you'll have to make sure that you use the same value across separate rows.

Since you're already using autoprefixer, you already have access to a modern CSS processor. I would suggest that you extract the measurements into a variable that you can reuse for the specific items.