如何防止网格区域的内部内容向下突出？

Question

我一直致力于构建一个包含一些“面板”和“行”的网格布局区域。每个面板由标题和主要元素组成，其中一些主要元素内部有一些项目。

这是我的演示。 https://codepen.io/bunatree/pen/Vwjqmod

#canvas {
  padding: 10px;
  display: grid;
  gap: 10px;
  grid-template:
    "bar1   bar1  "
    "panel1 panel2"
    "bar2   bar2  "
    "panel3 panel4"
    /1fr    1fr
}

#sidebar {
  grid-area: side;
  background-color: #c99;
}

#panel1 {
  grid-area: panel1;
}

#panel2 {
  grid-area: panel2;
}

#panel3 {
  grid-area: panel3;
}

#panel4 {
  grid-area: panel4;
}

#bar1 {
  grid-area: bar1;
}

#bar2 {
  grid-area: bar2;
}

.panel {
  padding: 10px;
  background-color: #ccc;
}

.bar {
  background-color: rgba(0,128,255,0.5);
  padding: 20px;
}

header {
  background-color: #9c9;
  padding: 10px;
}

main {
  min-height: 30px;
  padding: 10px;
  background-color: #c9c;
  /* I set this 100% height here so that
     the bottom of the main area reaches
     the bottom of the panel div. */
 height: 100%;
}

.item {
  background-color: #cc9;
  padding: 10px;
  margin: 10px 0;
}

<div id="canvas">
  <div class="bar" id="bar1">Bar 1</div>
  <div class="panel" id="panel1">
    <header>Panel 1</header>
    <main>
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
    </main>    
  </div>
  <div class="panel" id="panel2">
    <header>Panel 2</header>
    <main>
      <div class="item">Item 1</div>
    </main>    
  </div>
  <div class="bar" id="bar2">Bar 2</div>
  <div class="panel" id="panel3">
    <header>Panel 3</header>
    <main>
    </main>      
  </div>
  <div class="panel" id="panel4">
    <header>Panel 4</header>
    <main>
      <div class="item">Item 1</div>
    </main>
  </div>
</div>

但是，它使主要区域向下突出。

Some main element overflows in a downward direction.

没有100%的高度设置，溢出问题解决了，但主元素的高度适合内部项目的总高度。

Without the 100% height setting, the height of the main element is short when there is no inner item.

所以，我的问题是如何扩展主元素的高度，而不考虑内部项目的数量。

如果有人帮助我，我会很高兴。谢谢。

Answer 1

我自己解决了这个问题。

我不得不这样做；

• 停止对主要元素使用 100% 高度。 （这使它从网格区域溢出。）
• 将 display: flex 和 flex-direction: column 设置为 .panel 元素。
• 将 flex-grow: 1 设置为主元素以使其垂直扩展。

运行下面的代码，您将看到主元素（背景：紫色）的高度垂直适合面板元素（背景：灰色）的内部。

#canvas {
  padding: 10px;
  display: grid;
  gap: 10px;
  grid-template:
    "bar1   bar1  "
    "panel1 panel2"
    "bar2   bar2  "
    "panel3 panel4"
    /1fr    1fr
}

#panel1 {
  grid-area: panel1;
}

#panel2 {
  grid-area: panel2;
}

#panel3 {
  grid-area: panel3;
}

#panel4 {
  grid-area: panel4;
}

#bar1 {
  grid-area: bar1;
}

#bar2 {
  grid-area: bar2;
}

.panel {
  padding: 10px;
  background-color: #ccc;
  /* Set flex here,
     and set flex-grow: 1 for the main element. */
  display: flex;
  flex-direction: column;
}

.bar {
  background-color: rgba(0,128,255,0.5);
  padding: 20px;
}

header {
  background-color: #9c9;
  padding: 10px;
}

main {
  min-height: 30px;
  padding: 10px;
  background-color: #c9c;
  /* Use not height here but flex in the .panel element,
     and set flex-grow:1 here. */
  /* height: 100%; */
  flex-grow: 1;
}

.item {
  background-color: #cc9;
  padding: 10px;
  margin: 10px 0;
}

<div id="canvas">
  <div class="bar" id="bar1">Bar 1</div>
  <div class="panel" id="panel1">
    <header>Panel 1</header>
    <main>
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
    </main>    
  </div>
  <div class="panel" id="panel2">
    <header>Panel 2</header>
    <main>
      <div class="item">Item 1</div>
    </main>    
  </div>
  <div class="bar" id="bar2">Bar 2</div>
  <div class="panel" id="panel3">
    <header>Panel 3</header>
    <main>
    </main>      
  </div>
  <div class="panel" id="panel4">
    <header>Panel 4</header>
    <main>
      <div class="item">Item 1</div>
    </main>
  </div>
</div>