CSS的div四溢。 （调整浏览器时）

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

我看到的问题。

＃菜单相加的宽度为15％ 的。主要容器的宽度为85％

这应该是完整的，甚至100％，对不对？

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

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