Flexbox : 오버플로 자동 및 창 크기

아래 코드는 내가 가지고있는 문제를 보여줍니다. 브라우저 창 높이를 줄이면 창 래퍼가 마스터 래퍼로 축소되지 않습니다.Flexbox : 오버플로 자동 및 창 크기

누가 마스터 랩퍼가 브라우저 크기를 따라갈 때 창 랩퍼가 (높이) 늘어나도록 허용하지 않는지 알 수 있습니까?

<STYLE> 

html, body, .viewport { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 
/* WRAPPERS */ 

#master-wrapper { 
    width: 100%; 
    height: 100%; 
    min-width: 800px; 
    min-height: 500px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    font-size: 1em; 
    display: flex; 
    flex-direction: column; 
    flex: auto; 
    border-style:solid; 
    border-width:5px; 
} 
#window-wrapper { 
    background-color:#ffffff; 
    border-style:solid; 
    border-width:5px; 
    margin:30px; 
    width: 100%; 
    display-flex; 
    flex-grow:1; 
} 
#page-head { 
    width: 90% 
    margin-top:12px; 
    width:600px; 
    margin-top:10px 
    margin-bottom:10px; 
    margin-right:auto; 
    margin-left:auto; 
    text-align:center; 
    border-style:solid; 
    border-width:5px; 
} 
#nav-bar-wrapper { 
    vertical-align: top; 
    text-align: left; 
} 
#nav-bar{ 
    margin:10px; 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: center; 
    align-content: center; 
    top: 0; 
    border-style:solid; 
    border-width:5px; 
} 
#area-wrapper { 
    vertical-align: top; 
    min-height: 300px; 
    max-height: 800px; 
    margin:20px; 
    text-align: left; 
    border-style:solid; 
    border-width:5px; 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    overflow: auto; 
} 
#area-header { 
    height: 30px; 
    line-height: 30px; 
    text-align: center; 
    margin-left: 30px; 
    margin-right: 30px; 
    margin-top: 15px; 
    flex-direction: column; 
    font-size: 1em; 
    border-style:solid; 
    border-width:5px; 
} 
#area-section { 
    vertical-align: top; 
    text-align: left; 
    margin-left: 25px; 
    margin-right: 25px; 
    display: flex; 
    flex-direction: row; 
    flex-grow: 1; 
    flex-wrap: wrap; 
    justify-content: space-around; 

#row { 
    text-align:middle; 
    margin:75px; 
} 
#bottom-wrapper { 
    height: 40px; 
    margin-top:15px; 
    margin-bottom:15px; 
    margin-right:auto; 
    margin-left:auto; 
    border-style:solid; 
    border-width:5px; 
    font-size:1em; 
    background-color:gray; 
} 
</STYLE> 
<body> 
<div id="master-wrapper">master wrapper 
    <div id="window-wrapper">window wrapper 
     <div id="page-head">page head 
      <div id="nav-bar-wrapper">nav bar wrapper 
       <div id="nav-bar">nav bar</div> 
      </div> 
      <div id="area-wrapper">area wrapper 
       <div id="area-header">area header</div> 
       <div id="area-section"> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
        <div>"bunch of info"</div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="bottom-wrapper"> 
     bottom wrapper 
    </div> 
</div> 
</body>

출처

2017-05-20 Tim

플렉스 아이템의 초기 설정은'min-height : auto'입니다. 이는 항목의 내용 크기보다 작아 질 수 없음을 의미합니다. 그래서'# 윈도우 래퍼 (wrapper) '는'# 마스터 래퍼 (master-wrapper)'를 사용하여 높이를 줄이지 못합니다. 기본값을 무시하려면'#-window-wrapper '에'min-height : 0'을 적용하십시오. –

코드에 다양한 구문 오류가 있습니다. '# window-wrapper'에는'display-flex'가 있습니다. 이것은 무효입니다. 세미콜론이 누락되었습니다. 일단 고정되면 그들은 또한 레이아웃을 변화시킵니다. –

마이클 정말 고마워요. 나는 flexbox에서 많은 프론트 엔드 작업을 수행하지 않으며 전 1 년 전에 비슷한 질문을하는 것을 완전히 잊어 버렸다. 이것은 내 문제를 해결했다. 이 질문은 중복 되었기 때문에 삭제하십시오. – Tim

-1

너비 삭제 : 100 %; # window-wrapper의 속성.

출처

2017-05-20 22:44:02

내 문제가 해결되지 않습니다. 내 문제는 너비가 아닌 높이입니다. 하지만 고마워. – Tim

Flexbox : 오버플로 자동 및 창 크기

답변

관련 문제