CSS div 溢出。 (调整浏览器大小时)

Question

所以我遇到了一些问题，我暂时无法解决。这是大学类(class)的作业，我无法更改 html 文档。只应应用纯 CSS。问题是当我调整浏览器大小时。右侧的内容 div 溢出侧边栏 div。我该如何解决？

.centered-content {
        white-space: nowrap;
        width: 75%;
        min-width: 600px;
        margin-left: auto;
        margin-right: auto;
        background-color: rgba(246,246,246,0.9);
        border: 1px solid blue;
       overflow:hidden; 
    } 
        .main-container {
            position: relative;
            float: right;
            border: 2px solid red;
            display: inline-block;
            width: 85%;
            margin: auto;
            white-space: normal; /*Prevents child elements from inheriting nowrap.*/
            }
            #menu-add {
                position: absolute;
                width:15%;
                min-width: 180px;
                height: 100%;
                border: 1px solid green;
                display: inline-block;
            }

1: /image/O5zGc.png

评论中的 HTML DOC。

Answer 1

我看到了问题。

#menu-add的宽度为15%.main-container 的宽度为 85%

那应该是完整甚至 100%，对吧？

问题是 #menu-add 也有 min-width: 180px。这是一个问题，因为如果 180px 超过 15%，它们就会重叠。

为了弥补这一点，您可以将 .main-container 上的最大宽度设置为 180px 的相反值。 最大宽度:calc(100% - 180px)。