在 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;，它应该会给您想要的结果。

Fiddle: https://jsfiddle.net/caq8ojs9/

或者您也可以在 .content

中将 overflow: auto; 更改为 overflow: hidden;

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

Unexpected css overflow when padding inside 100% height container

css

grid

overflow