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)。