代码之家 › 专栏 › 技术社区 › F43nd1r

Css网格增长以适应内容

css-grid css3 css

F43nd1r · 技术社区 · 6 年前

我一直在努力让自己熟悉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>

2 回复 | 直到 6 年前

Temani Afif 6 年前

在您的示例中,有两个网格和两个其他包装器。两个网格都扩展到相同的大小,因为它们是由 inline-grid 但事实并非如此 .wrapper box-shadow

使 .包装纸 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>

KibGzr 6 年前

外层 .grid 永远是与内心一起成长 . 这是固定在这里的宽度 .scroll

推荐文章

Chris Sherlock · 如何将图像调整为css网格

3 年前

Tagc · 是否可以使用flexbox同时执行“行反转”和“列反转”之类的操作?

6 年前

Tv's Very Own · 网格行间距未应用百分比

6 年前

arw89 · CSS网格中的纯CSS箭头div

6 年前

Arie B · 使用html节标记时在css网格中提供相同的css属性

6 年前

ctaylordev94 · CSS网格行属性由Less[重复]错误编译

6 年前

techguy2000 · css网格单元格内容溢出不工作

7 年前

techno geek · css网格布局的水平滚动

7 年前

dkrasniy · Flexbox换行仅第一列,带溢出滚动

7 年前

WoJ · 如何使用Vue构建动态CSS网格?

7 年前