在 100% 高度的容器内填充时意外的 css 溢出

Question

我正在尝试将带有可滚动子区域的区域的整个高度放在屏幕上。虽然当我添加填充（蓝线）时没有填充（到子区域），但我得到以下不希望的溢出（红色交叉点）。

我不明白为什么会出现这种溢出，因为所有区域都是可滚动的并且高度设置为 100%。

我希望 content div 不显示滚动，并且 side 和 main 显示 100% 的可用高度和内部填充。

我尝试过的：

• 在内部元素中设置填充，而这工作我想避免它
• 使用 flex 但同样的问题
• 在元素上使用边距，但我也想避免它

有没有办法让它像这样工作而不必在内部元素中设置填充或在外部元素上设置边距？

---> Fiddle

样式

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: grid;
  grid-template-areas:
        "a a a"
        "b b c"
        "b b c";
  grid-template-columns: auto auto max-content;
  grid-template-rows: max-content auto;
  height: 100%;
  overflow: auto;
}
.header {
  grid-area: a;
  text-align: center;
  background-color: gold;
  height: 50px;
}
.shortcut {
  grid-area: c;
  background-color: LightBlue;
}

.content {
  grid-area: b;
  display: grid;
  grid-template-columns: 1fr 3fr;
  height: 100%;
  overflow: auto;
}

.side {
  display: grid;
  height: 100%;
  overflow: auto;
  gap: 32px;
  
  padding: 32px; /* <---- IF I REMOVE PADDING HERE IT WILL WORK AS EXPECTED (EXCEPT I LOOSE THE PADDING) */ 
  
  .sub-side {
    display: grid;
    height: 100%;
    overflow: auto;
    
    &.first {
      background-color: LightGreen;
    }
    &.second {
      background-color: LightCyan;
    }
  }
}

.main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  height: 100%;
  overflow: auto;
  
  padding: 32px; /* <---- IF I REMOVE PADDING HERE IT WILL WORK AS EXPECTED (EXCEPT I LOOSE THE PADDING) */ 
  
  .list {
    height: 100%;
    overflow: auto;
  }
  
  .widgets {
    display: grid;
    height: 100%;
    overflow: auto;
    background-color: LightCoral;
  }
}

.widgets {
  > div {
    height: 200px;
  }
}

HTML

<div class="container">
  <div class="header"> Header </div>
  <div class="shortcut">
    <div>shrtct 1</div>
    <div>shrtct 2</div>
    <div>shrtct 3</div>
    <div>shrtct 4</div>
    <div>shrtct 5</div>
    <div>shrtct 6</div>
    <div>shrtct 7</div>
    <div>shrtct 8</div>
    <div>shrtct 9</div>
  </div>
  <div class="content">
    <div class="side">
      <div class="sub-side first">
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
      </div>
      <div class="sub-side second">
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
        <div>Side 1</div>
        <div>Side 2</div>
        <div>Side 3</div>
        <div>Side 4</div>
        <div>Side 5</div>
      </div>
    </div>
    <div class="main">
      <div class="list">
        <div>List item 1</div>
        <div>List item 2</div>
        <div>List item 3</div>
      </div>
      <div class="widgets"> 
        <div>
         Widget 1
        </div>
        <div>
         Widget 2
        </div>
        <div>
         Widget 2
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

在.main 和.side 中将您的身高从100% 更改为height:auto;，它应该会给您想要的结果。

小提琴：https://jsfiddle.net/caq8ojs9/

或者您也可以在.content 中简单地将overflow: auto; 更改为overflow: hidden;