html - CSS:最大宽度不在最大宽度上

我有简单的CSS动画，并且使用max-width使水平滚动条不滚动。

元素只需要可见，这在1200px内就不多不少。

我尝试遵循最大宽度，但无法正常工作。

section {
  max-width: 1200px;
}
.box {
    width: 100%;
	max-width: 540px;
    position: relative;
    z-index: -1;
    top: 0px;
    transform: rotate(80deg);
    left: 1500px;
  }

  .wave {
    position: absolute;
    opacity: .4;
    width: 1500px;
    height: 1300px;
    margin-left: -150px;
    margin-top: -250px;
    border-radius: 43%;
  }

@keyframes rotate {
    from { transform: rotate(0deg); }
    from { transform: rotate(360deg); }
}

.wave.-one {
    animation: rotate 9000ms infinite linear;
    opacity: .1;
    background: #6FC4FF;
}

.wave.-two {
    animation: rotate 5000ms infinite linear;
    opacity: .1;
    background: #319DE8;
}

.wave.-three {
    animation: rotate 9500ms infinite linear;
    background-color: #0087E5;
}

<section>
  <div class='box'>
    <div class='wave -one'></div>
    <div class='wave -two'></div>
    <div class='wave -three'></div>
  </div>
</section>

最佳答案

我使用最大宽度使水平滚动条不滚动。


您需要使用overflow-x属性隐藏水平滚动

section {
  overflow-x: hidden;
  width:1200px;
}

关于html - CSS:最大宽度不在最大宽度上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57499647/