Сетка Css растет в соответствии с содержанием

Question

Я пытался обернуть меня вокруг сетки CSS.Почему внешняя сетка не увеличивается до размеров внутренней сетки в этом примере?Как я могу исправить этот макет?

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

Answer 1

В вашем примере у вас есть две сетки и две другие оболочки. Обе сетки расширены до одного размера, так как они сделаны inline-grid, но это не тот случай .wrapper, где вы применили box-shadow.

Сделайте .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>

Answer 2

Внешнее .grid всегда растет вместе с внутренним .grid. Здесь фиксированная ширина .scroll