如何使网格适合其可见内容？

Question

我有一个代表表格（红色）的网格，带有标题和正文（绿色）：

我的问题是，当我给正文一个高度并剪掉其溢出的内容时，表格不会缩小：

如何解决？

这是代码：

* {
  box-sizing: border-box;
}

.table {
  display: grid;
  grid-template-columns: repeat(2, auto);
  border: red solid;
}

.header,
.body,
.row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}

.body {
  max-height: 35px;
  overflow-y: scroll;
  border: green solid;
}

<!DOCTYPE html>
<html lang="en">
  <title>Test</title>
  <body>
    <div class="table">
      <div class="header">
        <div class="row">
          <div class="cell">Key</div>
          <div class="cell">Value</div>
        </div>
      </div>
      <div class="body">
        <div class="row">
          <div class="cell">a</div>
          <div class="cell">1</div>
        </div>
        <div class="row">
          <div class="cell">b</div>
          <div class="cell">2</div>
        </div>
        <div class="row">
          <div class="cell">c</div>
          <div class="cell">3</div>
        </div>
        <div class="row">
          <div class="cell">d</div>
          <div class="cell">4</div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

子网格的项目用于调整父网格的大小，即使子网格设置了某种

height

属性并且项目溢出了该高度。考虑到这一点，代码中的父网格将扩展以适应子网格中的所有内容，即使在子网格上设置了

max-height

。

解决方案 1：将

max-height

移至

.table

，然后放置

.header

贴纸。

解决方案 2：将

grid-template-columns: subgrid

更改为

grid-template-columns: repeat(2, auto)

。这将允许您将

max-height

保留在

.body

上，就像您现在拥有的那样，但您会丢失子网格。

来自子网格值规范：

网格行/列的大小将从父网格的定义中获取，而不是明确指定，并且子网格的项目将参与与父网格共享的任何轨道的固有大小计算。本质上，子网格提供了通过嵌套元素向下传递网格参数的能力，以及基于内容的大小调整信息返回到其父网格的能力。

如何使网格适合其可见内容？

问题描述投票：0回答：1

1个回答

最新问题

如何使网格适合其可见内容？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1