펑키 플렉스 박스 높이

Question

그건 내가 flexbox를 사용하여 얻을 수없는 매우 간단한 구조입니다.

본문에 머리글과 본문 요소가 있습니다. 머리글과 본문 요소는 길이가 길고 신체에는 작은 바닥 글이 있습니다. 내용을 스크롤 할 수 있고 바닥 글이 항상 표시되기를 바랍니다.

나는 flexbox를 사용하기 위해 모든 것을 설정했고, flex-direction: column을 사용하여 수직 위치를 얻었으며 flex: 1을 사용하여 정의되지 않은 높이의 요소로 나머지 공간을 차지했습니다.

이상하게도 50 픽셀의 고정 된 높이를 가진 내 머리글은 높이가 20 픽셀이며 내용이 전혀 스크롤 할 수 없거나, 오히려 그 내용이 내가 원하는 바가없는 작은 바닥 글 (녹색)과 함께 있습니다. 이 문제 크로스 브라우저를 만듭니다 퍼센트로 높이를 사용하여 내부 요소 인 flexbox을 결합 ..

DEMO HERE

.flex { display: flex; } 
 
.flex1 { flex: 1; } 
 
.col { flex-direction: column; } 
 
.red { background-color: red; } 
 
.blue { background-color: blue; } 
 
.green { background-color: green; } 
 
.yellow { background-color: yellow; } 
 
.pad { padding: 10px 15px; } 
 
.h50 { height: 50px; }

<div class="flex col" style="height: 100vh;"> 
 
    <div class="red h50"> 
 
    Wtf? 
 
    </div> 
 
    <div class="blue flex1 pad"> 
 
    <div class="flex col" style="height: 100%"> 
 
     <div class="yellow flex1" style="overflow: auto;"> 
 
     <div style="height: 1500px"> 
 
      Long content here 
 
     </div> 
 
     </div> 
 
     <div class="green h50"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

은 좋은 생각이 아니다 .

사용 인 flexbox 모든 방법, 여기에 내가 아이에게 flex1을 height: 100%을 제거하고 그래서 그 자식은 부모의 높이를 채울 blue에 flex을 추가,이 두 요소 클래스를 업데이트하여 그것의 부모 폭을 채울 수 있도록.

<div class="blue flex1 pad flex"> 
    <div class="flex flex1 col"> 

는 또한 콤을 기반으로 업데이트

body { margin: 0; } 
 
.flex { display: flex; } 
 
.flex1 { flex: 1; } 
 
.col { flex-direction: column; } 
 
.red { background-color: red; } 
 
.blue { background-color: blue; } 
 
.green { background-color: green; } 
 
.yellow { background-color: yellow; } 
 
.pad { padding: 10px 15px; } 
 
.h50 { height: 50px; }

<div class="flex col" style="height: 100vh;"> 
 
    <div class="red h50"> 
 
    Wtf? 
 
    </div> 
 
    <div class="blue flex1 pad flex"> 
 
    <div class="flex flex1 col"> 
 
     <div class="yellow flex1" style="overflow: auto;"> 
 
     <div style="height: 1500px"> 
 
      Long content here 
 
     </div> 
 
     </div> 
 
     <div class="green h50"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

---

스 니펫 body

스택에 margin: 0 추가 여기서 Firefox는 blue 요소에 min-height: 0이 필요합니다. 플렉스 항목의

는 기본 min-height/width 값이 너무 0로 변경이를 해결, 그 내용의 크기 이하로 축소 것을 방지 auto이다.

스택은 여전히 ​​같은 결과입니다

body { margin: 0; } 
 
.flex { display: flex; } 
 
.flex1 { flex: 1; } 
 
.col { flex-direction: column; } 
 
.red { background-color: red; } 
 
.blue { background-color: blue; } 
 
.green { background-color: green; } 
 
.yellow { background-color: yellow; } 
 
.pad { padding: 10px 15px; } 
 
.h50 { height: 50px; } 
 
.mh { min-height: 0; }

<div class="flex col" style="height: 100vh;"> 
 
    <div class="red h50"> 
 
    Wtf? 
 
    </div> 
 
    <div class="blue flex1 pad flex mh"> 
 
    <div class="flex flex1 col"> 
 
     <div class="yellow flex1" style="overflow: auto;"> 
 
     <div style="height: 1500px"> 
 
      Long content here 
 
     </div> 
 
     </div> 
 
     <div class="green h50"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>