填充中断溢出-y：滚动

Question

您好，我正在尝试将页面的大小与视口的大小保持一致。为此，我有一个可以滚动许多其他 div 的 div。它运行良好，但是一旦我向可滚动的子 div 添加填充（即使它是 1px），我就可以在我的页面上滚动到右侧和底部。我对造成这种情况的原因感到困惑。有什么想法吗？

这是class="store" div 的 html 部分，可以使用其中的部分进行滚动：

<div class="store flextwo"> 
    <section onclick="buyMinou(1)" class="cathand">
        <div>
            <div class="image flexone">
                <img src="" alt="cathand">
            </div>

            <div class="minou_info flextwo">
                <div class=minou_name>
                    Cat Hand
                </div>
                <div class="minou_fps">
                    <div class="base_fps flexone">
                        1
                    </div>
                    <div class="total_fps flextwo">
                        [Total clickValue]
                    </div>
                </div>
                <div class="minou_price_qty">
                    <div class="minou_price flextwo">
                        [Price]
                    </div>
                    <div class="minou_quantity flexone">
                        [Quantity]
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

另外我应该提到section中有8个。它们都有相同的标签，唯一改变的是我调用的函数onclick 和一些文本（没有把它们都放在那个代码中，因为它很长）。

这是关于可滚动 div 及其子级的 css

html {
  height: 100vh;
  width: 100vw;
  margin: 0;
}

body {
  height: 100%;
  margin: 0;
}

.main_wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.store {
  background-color: #6050dc;
  overflow-y: auto;
}

.store > section {
  margin: 2%; // Margin doesn't cause an issue unless it's too big. 
  color: #10121b;
  background-color: #94c2c2;
  padding: 10px;  // THIS IS THE ISSUE. When I remove this padding my page isn't scrollable (which is what i want). And my div is perfectly scrollable as i want.
  box-sizing: border-box;
  height: 25%;
  transition: box-shadow 0.2s;
}

.store > section:hover {
  box-shadow: inset 0px 0px 0px 4px white;
  cursor: pointer;
}

.store > section > div {
  display: flex;
  height: 100%;
  width: 100%;
}

我也遇到了borders 属性的问题。它似乎会影响我的 div 的大小，因此页面会适应它。 我的 html 和 body 都有一个margin: 0;。

如果问题似乎不在该代码块中并且您需要查看更多内容，请告诉我。

Answer 1

添加 * { box-sizing: border-box; } 以在宽度设置中包含所有边框和填充，而不是添加它们。