[css-sizing] max-width: 100% while also using width: min-content on container

[o-t-w]

https://www.w3.org/TR/css-sizing-3/#width-height-keywords

Using min-content to get text to wrap to the same size as an image is very helpful.

<div class="container">
<img>
<p> lorem ipsum etc </p>
</div>

However, most users also need to make sure that on small screens/mobile there is no horizontal scrolling, which would normally be achieved with max-width: 100% on images.

.container {
width: min-content;
}

img {
max-width: 100%;
}

These two things do not seem to be compatible with one another. Setting max-width: 100% on the image causes min-content to stop working on the element containing the image.

I realise why this can't work as the logic becomes circular, but is there a solution to constraining image widths on smaller screens?

[Loirooriol]

You can try something like https://jsfiddle.net/sm4tecns/

.container {
  width: max-content;
}
.container, img {
  max-width: 100%;
}
p {
  width: 0;
  min-width: 100%;
}

[o-t-w]

Thanks for this ingenious solution @Loirooriol. It solves the immediate problem for me :)

I can't help feeling the spec should let me solve the problem in the way I originally attempted as it is more intuitive (at least to me).
Even if I set a width of max-content on the image, setting a max-width of 100% still squishes the image down even on large screens

.container {
width: min-content;
}

img {
width: max-content;
max-width: 100%;
}