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

问题描述

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

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

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

我试过的：

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

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

--->小提琴<---

风格

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>

标签： cssgridoverflow

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

问题描述

解决方案

推荐阅读