CSS Grid min-content not working properly on Chrome

Question

I am creating a simple two columns layout with grid. One contains image and the second one only few paragraphs. I want to set images height same as second div with text. My template-rows property is set to min-content which works perfect on Firefox but on Chrome my image is expanding to all its height.

Display this example in two different browsers to see the difference.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content;
  width: 1000px;
  margin: 0 auto;
}

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

<div class="grid">
  <img src="https://m.media-amazon.com/images/M/MV5BNjgwNjkwOWYtYmM3My00NzI1LTk5OGItYWY0OTMyZTY4OTg2XkEyXkFqcGdeQXVyODk4OTc3MTY@._V1_.jpg" alt="">
  <div>
    <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz.</p>
                   <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz.</p>
  </div>
</div>

score 5 · Accepted Answer · answered May 30 '20 at 13:41

Instead of min-content, wrap the img inside a div and consider the trick height: 0;min-height:100%;

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
}

img {
  width: 100%;
  height: 0;
  min-height: 100%;
}

<div class="grid">
  <div>
    <img src="https://m.media-amazon.com/images/M/MV5BNjgwNjkwOWYtYmM3My00NzI1LTk5OGItYWY0OTMyZTY4OTg2XkEyXkFqcGdeQXVyODk4OTc3MTY@._V1_.jpg" alt=""></div>
  <div>
    <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy
      veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz.</p>
    <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy
      veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz.</p>
  </div>
</div>

Related: How can you set the height of an outer div to always be equal to a particular inner div?

CSS Grid min-content not working properly on Chrome

1 Answers1