CSS Grid min-content 在 Chrome 上无法正常工作

Question

我正在创建一个带有网格的简单的两列布局。一个包含图像，第二个只有几段。我想用文本设置与第二个 div 相同的图像高度。我的模板行属性设置为 min-content它在 Firefox 上完美运行，但在 Chrome 上我的图像扩展到了它的所有高度。

在两个不同的浏览器中显示此示例以查看差异。

.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>

Answer 1

而不是 min-content , 将 img 包裹在 div 中并考虑技巧 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>

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