为什么应用高度会使滚动条显示在错误的断点上？

Question

我在我的网站上滚动条出现在像素点错误的问题。我将问题缩小为简单的codepen结构。

html,
body {
  margin: 0;
  padding: 0;
}

.cont {
  margin: 0;
  background: #333;
}

.cont__inner {
  width: 1100px;
  margin: 0 auto;
}

@media screen and (max-width: 1170px) {
  .cont__inner {
    width: 950px;
  }
}

.cont__inner_main {
  padding: 0 45px;
}

.why {
  height: 115px;
}

<div class="cont">
  <div class="cont__inner cont__inner_main ">
    <div class="why">adssd</div>
  </div>
</div>

当我将高度700px应用于div.why时，问题就来了。 您可以看到容器的宽度在两边都是1100px + 45px padding，所以它的1190px总数

我已将媒体屏幕断点设置为较低，以跟踪滚动条何时出现。 您可以测试自己，它出现在1206px上，并且此时没有元素重叠文档宽度。删除heigth 700px可以解决问题，但是它甚至对宽度产生了什么影响？

Answer 1

只需在＆_main

中添加 width：auto

&_main 
  padding: 0 $mn * 3
  width: auto