你如何使溢出-y 属性占元素边距，而不影响溢出-x？答案

【问题标题】：How do you make overflow-y property account for an elements margin, without affecting overflow-x?你如何使溢出-y 属性占元素边距，而不影响溢出-x？
【发布时间】：2022-07-19 16:28:24
【问题描述】：

我页面上的<main> 元素在计算其内容框高度时不包括其最后一个元素的margin-bottom 值。为了解决这个问题，我设置了overflow-y: auto，现在将最后一个元素的边距考虑在内。

问题在于这会导致较小屏幕上出现水平滚动条。如何只设置overflow-y，而不影响overflow-x？

<main>
  <div>
    <h1>test</h1>
  </div>
</main>

main {
  outline: 1px solid red;
  overflow-y: auto;
}

div {
  margin-bottom: 2rem;
}

【问题讨论】：

标签： css overflow padding margin

【解决方案1】：

这是因为当overflow 的初始值为visible 时，更改x 或y 溢出值会导致另一个变为auto。

我的解决方法是使用这条规则：

main {
 overflow: hidden auto;
}

在此处发布此内容是因为我花了很长时间才弄清楚。希望这对某人有所帮助。

【讨论】：