如何根据内容更改弹性项目的大小

Question

我有 2 个容器。一张用于图片，一张用于餐桌。 我希望每个容器根据图片的数量和表格的行数来改变它的高度。

上面图片的容器应该扩展到 2 行（我用 max-height 做到了），如果有第三行或更多行，它就会变成可滚动的。 底部表格的容器应展开直到屏幕的其余部分高度，然后变为可滚动。

但是，如果图片的容器只有一行，我希望表格扩展到最大高度。

另外，我不希望图片的第二行被桌子剪掉（不幸的是，这就是现在发生的事情）。

这是我到目前为止所做的，接近预期的行为，但仍然没有按我想要的方式工作。我更喜欢只使用 CSS 作为解决方案。

这是我的CodePen

HTML：

<div class="main">
  <div class="pic-container">
    <div class="pic">picture</div>
    <div class="pic">picture</div>
    <div class="pic">picture</div>
    <div class="pic">picture</div>
    <div class="pic">picture</div>
    <div class="pic">picture</div>
    <div class="pic">picture</div>
    
  </div>
  <div class="table-container">
    <div class="table">
      <table>
        <tbody id="tbody">
        <tr><td>my</td><td>life</td><td>for</td><td>Auir</td</tr>
        <tr><td>my</td><td>life</td><td>for</td><td>Auir</td</tr>
        <tr><td>my</td><td>life</td><td>for</td><td>Auir</td</tr>
        <tr><td>my</td><td>life</td><td>for</td><td>Auir</td</tr>
        <tr><td>my</td><td>life</td><td>for</td><td>Auir</td</tr>
        
        
        </tbody>
      </table>
    </div>
  </div>
</div>

css:

.main {
  height: 600px;
  width: 800px;
  background: pink;
  display: flex;
  flex-direction: column;
}

.pic-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  overflow: auto;
  max-height: 304px; /* 2 pic + borders*/

}

.table-container {
  background-color: lightsalmon;
  flex-grow: 1;
  max-height: calc(600px - 152px);
}

.pic {
  background: lightblue;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
}

.table {
  overflow: auto;
  height: 100%;
}

table, td, th {
  border: 1px solid black;
}
td {
  padding: 10px;
}
table {
  width: 100%;
  position: relative;
  border-collapse: collapse;
  overflow: auto;
}

表格越过第二行图片 - 不好

这就是我希望它的行为方式 -> 有什么想法吗？

只有一行时它的行为示例 - 好

Answer 1

这对我有用。最重要的部分是将主 div 显示形式 flex 更改为 grid：display: grid; grid-template-rows: min-content auto; 并将 overflow: auto; 从 table 标签移动到 table-container 类。

.main {
  height: 600px;
  width: 800px;
  background: pink;
  display: grid;
  grid-template-rows: min-content auto;
}

.pic-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  overflow: auto;
  max-height: 304px; /* 2 pic + borders*/

}

.table-container {
  background-color: lightsalmon;
  overflow: auto;
}

.pic {
  background: lightblue;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
}

.table {
  height: 100%;
}

table, td, th {
  border: 1px solid black;
}
td {
  padding: 10px;
}
table {
  width: 100%;
  position: relative;
  border-collapse: collapse;
  overflow: auto;
}