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 컨테이너의 폭은 좋아, 85 % 전체 심지어 100 %이어야

이다?

문제는 # menu-add에도 min-width: 180px이 있다는 것입니다. 180px가 15 %를 초과하면 오버랩됩니다.

이 문제를 보완하기 위해 .main-container의 최대 너비를 180px와 반대로 설정할 수 있습니다. max-width: calc(100% - 180px).