사용 가능한 공간을 채우기 위해 굴곡 상자 열 가져 오기

Question

나는 플렉스 박스의 항목을 채우는 데 css flex 상자가 올바르게 작동하도록 노력했습니다.

기본적으로이 코드는 두 플렉스 조각이 각각 사용 가능한 높이의 50 %를 차지하도록 고르게 배치해야합니다. 필자가 수동으로 높이를 50 %로 설정하면 작동하지만 잘못된 솔루션처럼 보입니다.

나는 가이드를 여기에서 읽었다 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 그리고 여러가지 align-self, flex-grow, align-content를 시도해 보았다. 그것들을 고칠지를 알았지 만 지금까지 나는 행운이 없었다. 나는 간단한 것을 놓치고 있다고 확신하지만, 나는 그것을 알아낼 수 없었고, 스택 오버플로에 대한 다른 질문을 읽는 것은 내가 잘못하고있는 것을 알아 내는데 도움이되지 않는 것 같다. .

.flex { 
 
    display: flex; 
 
} 
 

 
.flex1 { 
 
    flex: 1; 
 
} 
 

 
.col-flex { 
 
    flex-flow: column nowrap; 
 
    justify-content: space-evenly; 
 
}

<div class="flex" style="height:200px"> 
 
    <div class="flex1"> 
 
    <div class="col-flex" style="height:100%;background-color:grey"> 
 
     <div class="flex1" style="background-color:blue;flex-grow:1">I should be top half, you shouldn't see grey</div> 
 
     <div class="flex1" style="background-color:green;flex-grow:1">I should be bottom half, you shouldn't see grey</div> 
 
    </div> 
 
    </div> 
 
    <div class="flex1" style="background-color: red;"> 
 
    The flex on the row based flex works correctly; 
 
    </div> 
 
</div>

여기

전체 코드 :

Answer 1

https://codepen.io/anon/pen/EwbLMM 컨테이너에게 인 flexbox 너무합니다. display: flexcol-flex에 추가 - 데모 아래 참조 :

.flex{ 
 
    display:flex; 
 
} 
 

 
.flex1{ 
 
    flex:1; 
 
} 
 

 
.col-flex{ 
 
    display: flex; /* ADDED */ 
 
    flex-flow: column nowrap; 
 
    justify-content: space-evenly; 
 
}

<div class="flex" style="height:200px"> 
 
    <div class="flex1"> 
 
    <div class="col-flex" style="height:100%;background-color:grey"> 
 
     <div class="flex1" style="background-color:blue;flex-grow:1">I should be top half, you shouldn't see grey</div> 
 
     <div class="flex1" style="background-color:green;flex-grow:1">I should be bottom half, you shouldn't see grey</div> 
 
    </div> 
 
    </div> 
 
    <div class="flex1" style="background-color: red;"> 
 
    The flex on the row based flex works correctly; 
 
    </div> 
 
</div>