Javascript 一个div正在扩展页面的宽度

我有一个一页的网站。它基本上是一个章节列表。其中一个部分有一个按钮，单击时覆盖对话框。这个对话框最终扩展了页面的宽度，并引入了一个横向滚动条

这真的破坏了外观，我希望使对话框不展开页面

仅供参考，其布局与此处相同：

我尝试在有问题的部分设置max width:100%和overflow-x:hidden，但没有效果

下面是有问题的部分的标记：

<section id="music-section">
    <div class="music-container">
        <h1> About Us </h1>
        <h2> The following is our mission statement on campus. </h2>

        <div class="music-row">
            <music-demo></music-demo>
        </div>

        <div class="music-row">
            <music-demo-duplicate></music-demo-duplicate>
        </div>
    </div>
</section>

---

您是否在div中使用position:absolute？

---

元素无法与div的位置对齐：绝对，其他原因可能是div的大小，在值width和height中使用了%。

不幸的是，您提供的CSS与HTML不对应。如果您有一个流畅的布局，它会根据屏幕/浏览器大小调整大小，并且音乐部分的父容器是宽度：100%；或者在这种情况下，最大宽度，这可能会导致我发现的问题。子元素通常会扩展到父元素之外。对我有效的是：

.music-row {
    width: auto;
    height: 330px;
  }

---

将您的孩子设置为自动而不是100%。我希望它对您有用。

您能发布一些代码吗？你尝试了什么？你必须发布你的代码让我们看看你到目前为止做了什么..添加css正文，html{overflow:hidden}添加这会导致页面无法向下滚动。相反，我尝试了溢出-x:hidden；这也不行。

.music-row {
    width: auto;
    height: 330px;
  }