CSS网格自适应内容大小

Question

我一直在试图理解CSS Grid。为什么在这个例子中外部网格没有扩展到内部网格的大小？我该如何修复这个布局？

.scroll {
  width: 200px;
  overflow: auto;
}

.wrapper {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border-radius: 2px;
  margin: 1rem;
}

.grid {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-column-gap: 1em;
}

<div class="scroll">
  <div class="wrapper">
    <div class="grid">
      <p>Grid:</p>
      <div class="grid">
        <p>text here</p>
        <p>verylongtextherewithoutanybreakingoptions</p>
      </div>
    </div>
  </div>
</div>

- F43nd1r

Answer 1

在你的示例中，你有两个网格和两个其他包装器。由于它们都是inline-grid，所以两个网格都被扩展到相同的大小，但这不适用于应用了box-shadow的.wrapper。

将.wrapper设置为inline-block，即可解决布局问题。

.scroll {
  width: 200px;
  overflow: auto;
}

.wrapper {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border-radius: 2px;
  margin: 1rem;
  display:inline-block;
}

.grid {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-column-gap: 1em;
}

<div class="scroll">
  <div class="wrapper">
    <div class="grid">
      <p>Grid:</p>
      <div class="grid">
        <p>text here</p>
        <p>verylongtextherewithoutanybreakingoptions</p>
      </div>
    </div>
  </div>
</div>

- Temani Afif

Answer 2

外部的 .grid 与内部的 .grid 总是一起增长。这里固定的是 .scroll 的宽度。

- KibGzr