Post #4249640

Another major #HTML / #CSS discovery: You limit the height of the image so that it fits within the screen; the width of it will automatically scale, e.g. `width: auto; max-height: 75vh;` However, the text element below will stretch the container out automatically because it's technically 'wider' than the image (see img1). You want the image to set the container width, but you don't know its width! (The text is wrapped in a DIV so that it can scroll if it overflows without scrolling the entire popover) Setting the width to `min-content` so that it doesn't maximise its width unfortunately doesn't fill the space. (see img2) In Chrome this can be solved by also setting `min-width` to `stretch` (img3), however this doesn't work in Firefox / iOS / Android. Firefox will however work if you use `fit-content` instead (img4) -- but that then breaks Chrome! Including Webkit (iOS / Android), the correct solution for making the element as wide as the container without extending the container is: ```css min-width: -webkit-fill-available; min-width: fit-content; min-width: stretch; width: min-content; ``` (NB: The order of the three `min-width` properties is critical!) (aside: the site is an Encarta-like encyclopedia for my book about a world inside a sandglass the size of Earth: https://camendesign.com/nomad #worldglass) #webdev