‘
‘
‘
‘
‘
‘

‘

That’s super interesting, Peter! There does seem to be a difference between those definitions and what elements they include. The post has been updated. Thanks for the heads up!

The link to the relevant CSS definition of non-/replaced-element is https://www.w3.org/TR/css-display-3/#replaced-element

Maybe this misunderstanding is caused by the HTML spec to define “replaced element” differently than CSS. This should be explicitly mentioned in the article, since an article about a CSS property naturally implies using the CSS definitions of things.

ul { width: max-content; margin: 1em auto; }

I think i would use the flex property on the parent div, make it so that the width of the parent is inherit the width of the picture, and make the picture flex: 1. normally like that it should all be good.

I don’t know if you still look for the answer but from what i experience using those two:

width : 100% define the element to be 100% of the width of the parent container that got defined dimensions.
max-width: 100 % restrict the size of the element to be lower or equal to 100% of the width of the parent container that got defined dimensions.

In other words, use width if you want your element to be strictly equal to his parent, use max-width for more flexible display and a safety that your element won’t be “out of the box”.

img{width:100%;}

and

img{max-width:100%;}

This is another one of life’s great mysteries:)

Hey Miguel! Can you give a real life example of “fill-available”? This sounds like something that could be extremely useful and I have just heard of it now!!

width: fill-available;
width: -moz-fill-available;
width: -webkit-fill-available;

In case that you were not joking, what fill-available does is to give an element as much width (or height) as possible without overflowing its parent, that taking in consideration margin and padding (i.e. differently than 100% width).

I love fill-available :)

If we wanted that figure element to essentially be the size of that image, so the text wraps at the edges of the image. We could float it left or right, because float will exhibit that same kind of shrink-to-fit behavior(…)

Could anyone possibly please explain how to achieve the same effect without setting up width for parental div (figure in this particular case)? I’ve been trying to float it left, or right, but couldn’t force paragraph to shrink to fit to the image size. If I’d set up the width for 200px for div, the problem solves itself, but I don’t need any floats. So, how can I achieve the same effect without specifying width for the figure, only with floats?