How to remove flexbox extra whitespace at the end?

[Chronzam]

Here is the pen:

Is there a way for the parent to follow its child’s width?

[PaulOB]

Hi,

You still seem to be throwing styles at your problem and hoping something sticks without a clear understanding of how grid or flex really work.

Why are you using both grid and flex yet you have no grid structure?

However, the problem you are encountering is a side issue in that you are trying to set the width of the flex item to 10% and then set an image to 100% of that 10%. This means the browser gets stuck in a loop because the width of the flex item is dependent on the image size but the image size is dependent on the flex item size. Therefore the browser tries to resolve this by taking the natural width of your image (150px) and then setting the flex item to 10% of that size. You end up with an image that is a fixed px width and does not scale up or down and a flex container that expects a 150px image size.

There’s some muddled thinking going on here.

If you want the image to be a percentage width then you would need to do it like this:

Note that the specs say that when the width of the element is dependent on the width of its content and its content width is dependent on the width of its parent then the resulting behaviour is undefined.