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％ です.main-コンテナの幅は右、フルでも100％である必要があり、85％

のですか？

問題は＃menu-addもmin-width: 180pxです。 180pxが15％を超えると重なり合うため、これは問題です。

これを補うには、.main-containerの最大幅を180pxの反対に設定します。 max-width: calc(100% - 180px)。