First time poster here so hope I have done things correctly.
See Codepen below where I have pasted the relevant code. I want to have a box which is an input in a form. I want the box to have one column and three rows. The first row will contain an image and the second and third rows text, as a
. The text will be variable in length. I want the box to have fixed pixel dimensions (which I can alter via media queries later). I want the image to fill the remaining height (apart from margins and padding) after the text has been added.
The code works in Firefox but not in Chrome, Android or Edge. What am I doing wrong please? I am astounded by the in depth knowledge on display in these forums. Thank you.
I wonder if grid was not the best way of doing this? I would only ever want the grid to have one picture. I am doing it so that each grid has one picture and two peices of text - each grid is an input for a form. Thank you for your help.
The auto value distributes the space based on the content and then adjusts the free space between the items evenly. When you make the image height:100% then it should only take up 100% height of that small space. Therefore I believe Firefox is incorrect in stretching the image to take up all the space.
If you replace one of your images with the text snippet you can see clearly that Chrome only makes the image as tall as the space would have allowed.
When I changed the first row to 1fr that tells the browser that that element should take up all the remaining space and the other elements take up only their minimum content needs. If I add the 1fr to your demo in Chrome then you get the result you desired.
As to whether Firefox is ‘wrong’ to do what it does is probably covered by an ambiguity in the specs where the space an element requires is determined by the height of its content but at the same time its contents height is determined by the amount of space available. It’s a circular reference where according to the specs the outcome would be undefined. i.e. The image’s height is based on the space available but the space available is based on the image’s height.
Therefore the solution is to do it properly for all browsers and force the available space with 1fr and then all browsers can calculate the image’s height as they now have the basis for that to be resolved.
CSS always has problems in basing percentage widths and heights on elements that get their dimensions via their content whose own height is determined by the space available.