CSS divs溢出。 （调整浏览器大小时）

Question

所以我遇到了一些问题，我暂时无法修复。它是大学课程的家庭作业，我无法改变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：https://i.stack.imgur.com/O5zGc.png

评论中的HTML DOC。

Answer 1

我看到了问题。

＃menu-add的宽度为15％ .main-container的宽度为85％

那应该是100％完整，对吧？

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

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