CSS-Grid: grid-template-rows auto with different results in Safari, Firefox and Chrome

Question

I am trying to create a responsive Square (in grey) with dynamic Content, where an Image (yellow) is to be scaled depending on the length of the text / height of the content div below the Image (blue). While this works perfectly fine in Chrome, Safari and Firefox come up with two very different outputs as shown below. The don't seem to scale the Image correctly or ignore the auto height of the grid-row and place the content outside of the Square-Div.

What am I missing here?

html,
body {
  height: 100%;
}

.wrapper {
  width: 25%;
}

.square {
  height: 0;
  padding-bottom: 100%;
  position: relative;
}

.grid {
  display: grid;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  grid-template-rows: auto min-content;
  grid-template-areas: 
   "cover" 
   "content";
  background: grey;
}

.cover {
  grid-area: cover;
  height: 100%;
  width: 100%;
}

.image {
  height: 100%;
  border: 1px solid red;
}

.content {
  grid-area: content;
  background: blue;
  color: white;
}

<div class='wrapper'>
  <div class='square'>
    <div class='grid'>
      <div class='cover'><img src='https://i.imgur.com/I9UFWodl.png' class='image'></div>
      <div class='content'>Dynamic Text<br>Even more Dynamic Text</div>
    </div>
  </div>
</div>

Screenshots

Chrome

Firefox

Safari

I tried this on OSX, all Browsers are current Versions.

Already found one solution, which is using the the Image as background-image for .cover, but unfortunately I need to have an inline image (to apply a shadow and such...), so any help is much appreciated. Thanks.

Codepen: https://codepen.io/rx2347/pen/oNNqvNV

Just noticed: This works perfectly fine, if the size of the square becomes larger than the given image. It will scale up the image and remain the proportions of the square, but it won't scale down and do the same thing...

Another observation: Safari does seem to ignore the auto value for grid-template-rows and scales the grid-container up if content exceeds the grid. While Chrome and Firefox stick to a 400x400px square and apply some kind of overflow:hidden to the auto row, Safari scales this up to 800px. Even with overflow:hidden for the .cover container...

.grid {
  height:400px;
  width:400px;
  display: grid;
  background:grey;
  grid-template-rows: auto min-content;
  grid-template-areas: "cover"
                       "info";
  overflow:hidden;
}

.cover {
  grid-area:cover;
  border:5px solid green;
  height:100%;
  overflow:hidden;
}

.content {
  background:red;
  height:800px;
}

.info {
  grid-area:info;
  color:white;
  background:blue;
}

<div class='grid'>
  <div class='cover'>
    <div class='content'>
    </div>
    
  </div>
  <div class='info'>text</div>
</div>

Answer 1

Solved this by adding another .container and overflow:hidden to the .cover div.

Not sure, why this has to be added for Safari to fit all the divs inside the square though as there actually is no overflow.

Anyways. Use overflow:hidden for Safari when using grid-template-rows: auto min-content; for the auto row.

  html,body {
    height:100%;
  }

  .wrapper {
    width:50%;
  }

  .square {
    position:relative;
    width: 100%;
  }

  .square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
    background:green;
  }

  .container {
    position:absolute;
    width:100%;
    height:100%;
}

  .grid {
    display:grid;
    position:absolute;
    height:100%;
    width:100%;
    grid-template-rows: auto min-content;
    grid-template-columns: 100%;
    grid-template-areas:
      "cover"
      "content";
    background:grey;
  }

  .cover {
    grid-area:cover;
    display:block;
    overflow:hidden;
  }

  .image {
    max-height:100%;
    height:100%;
    border:1px solid red;
  }

  .content {
    grid-area:content;
    background:blue;
    color:white;
  }

<div class='wrapper'>

<div class='square'>
  <div class='container'>
    <div class='grid'>
      <div class='cover'><img src='https://i.imgur.com/I9UFWodl.png' class='image'></div>
      <div class='content'>Dynamic Content<br>Can even be multiple lines and the content will stay within the Square</div>
    </div>
  </div>
</div>

</div>