Why Is My Grid Element'S Height Not Being Calculated Correctly

How is the height of this grid-container being calculated?

First, let's get rid of some properties to have the following:

.footer {
  font-size: 15px;
  line-height: 1.2em;
  width: 100vw;
  background-color: #090B19;
  color: white;
}

.footer .icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: 100%;*/
  margin: 0 auto;
}

img {
  /* height: 100%; */
  width: 100%;
  outline:1px solid red;
}

<div class="footer">
  <div class="icons">
    <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
    <a href="https://stackoverflow.com/users/14037283/tonitone120?tab=summary" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="so-image"></a>
    <a href="www.google.com" target="_blank"><img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image"></a>
  </div>
</div>

Problem with max-height not working in css grid element

I think the issue not actually related to the grid. I can reproduce it using normal block element as well.

#div0 {
  width: 200px;
  height: 50px;
}

#div1 {
  height: fit-content;
  max-height: 100%;
  background: blue;
  /* it works using height instead of max-height
  height: 100%;
  */
}

#out {
  height: auto;
  max-height: 100%;
  overflow: hidden;
  background: purple;
  width: 150px;
}

#large {
  height: 100px;
  width: 100px;
  background: red;
}

<div id='div0'>
  <div id='div1'>
    <div id='out'>
      <div id='large'>
      </div>
    </div>
  </div>
</div>

Why does `height: 100%` value 'work' for child tags of grid-items?

This is related to the stretch default alignment of grid item.

Note: Since formulas calculated using only definite sizes, such as the stretch fit formula, are also definite, the size of a grid item which is stretched is also considered definite. ^ref

As you can see, the size is definite so it can be used as reference for percentage.

Same logic for flexbox:

If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved ^ref

Related question with non-intuive percentage behavior: https://stackoverflow.com/a/52137966/8620333

Why does overflow visible mean an svgs height is not calculated correctly when 100% - in FireFox?

The issue is due to the fact that you are using percentage value inside grid and the percentage will be relative to grid track not the grid container. This will create a random behavior since we didn't explicitely define the size of the tracks

An easy fix is to define a grid-template-rows in addition to the height with the same value:

body {  height: 100%;  width: 100%;  margin: 0;  padding: 0;}
svg {  background-color: green;  height: 100%;  width: 100%;  overflow: visible;}
#parent {  position: absolute;  left: 30px;  top: 50px;  width: 150px;  height: 75px;  grid-template-rows: 75px; /* added this*/  display: grid;}

<div id="parent">  <svg></svg></div>

CSS Grid, grid item height: 100% not working in Chrome

So basically what Is happening is there is no height given to the parent container projects so when you say 100% height on the image it doesn't actually know what you mean, height of what??

So to fix it you will need to add a height to your parent container projects, now you can set that to be whatever you like but if you want it to be 100% of the screen height you have to use height: 100vh

edit

On further inspection it looks as if you want all the images to line up the same way as well so what you will have to do is remove your image tag and create a div like so..

<div class="img_container">
</div>

then in your css

.img_container{
    height: 50%; // or whatever value just make sure you give your parent a height
    width: 100%;
    background: url('link to your image') 50% no-repeat;
    background-size: cover;
 }

what this does is creates a container that holds the image and then fits the image to the container so all your images look the same width and height, now you will have to play around with it for a bit but this should give you what you want

React: CSS not recalculating heights in grid-container when state changes

Okay I have found a solution based on this post. Setting the grid-template-columns to "auto minmax(0,1fr) auto" instead of "auto 1fr auto" does achieve the expected result. The labelContainer resizes without overflowing depending on its content and diagramContainer takes up the rest of the space.

Solution:

.wrapper {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto; /* change it to this */
    grid-template-columns: 100%;
}

.labelContainer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

Why does the last row in my CSS grid layout take up less height than the rest of the rows?

changing your padding will give you a desired result

i changed this and it spaces all content inside your table.

padding: 25px 5px 50px; try that out

The relative unit (percentage) cannot be applied by the browser to the space set by fr

If this is not an undefined behavior, which is the correct behavior?

I would say, Firefox is doing correctly here and Chrome is half correct.

First, you can reduce your code to the following as grid-template-rows: 1fr is not needed to have the behavior

.container {  display: grid;  grid-template-columns: 1fr 1fr;  background: red;  gap: 10px;}
img {  width: 100%;  height: 100%;  object-fit: cover;}

<div class="container">  <div class="item">    <img src="https://unsplash.it/450/450">  </div>  <div class="item">    <img src="https://unsplash.it/450/450">    text  </div></div>