如何使“适合内容”跨浏览器工作？答案

【问题标题】：How to make "fit-content" work across browsers?如何使“适合内容”跨浏览器工作？
【发布时间】：2019-07-11 10:23:36
【问题描述】：

我有这个简单的网格设置，其中单元格是 <p> 元素（注意：它必须保持这种状态）：

<div class="wrapper">
  <p>Text Content</p>
  <p>
    <img class="my" src="http://www.stuff.co.nz/etc/designs/ffx/nz/stuff/social-media-logos/stuff-200x200.png"/>
  </p>
</div>

CSS：

.wrapper {
  display: grid;
  grid-template-columns: 220px 220px;
  background-color: #fff;
  grid-gap: 10px;
  text-align: center;
}

.wrapper p {
  height: fit-content;
  height: -moz-fit-content;
  border-color: black;
  border: solid;
  border-width: 0.5px;
}

.my {
  height: 200px;
}

(here it is on the CodePen)

它在 Chrome 上按预期工作——“文本内容”段落“拥抱”内容并保持小于 200 像素（由 <img> 的 .my 类决定）。但是，在 Firefox 上，它停止工作 - 段落高度为 200 像素，好像没有提供 -moz-fit-content。

如何使这段代码在 Firefox 中的行为与在 Chrome 中的行为相似？

【问题讨论】：

标签： html css layout css-grid

【解决方案1】：

移除网格项上的height，并将align-items: start;（默认为stretch）添加到网格容器中。

.wrapper {
  display: grid;
  grid-template-columns: 220px 220px;
  align-items: start; /* NEW */
  background-color: #fff;
  grid-gap: 10px;
  text-align: center;
}

.wrapper p {
  border-color: red;
  border: solid;
  border-width: 0.5px;
}

.my {
  height: 200px;
}

<div class="wrapper">
  <p>Text Content</p>
  <p>
    <img class="my" src="https://i.imgur.com/Spk75ST.jpg" />
  </p>
</div>

【讨论】：