크롬에서 플렉스 아이템 내부의 최소 높이가 무시됩니다

Question

플렉스 컨테이너에 flex-direction: row과 플렉스 아이템이 있습니다. 플렉스 항목 자체는 다양한 높이를 가지지 만 기본값이 align-items: stretch이므로 플렉스 항목은 모두 플렉스 컨테이너 높이를 채 웁니다. 내 구체적인 사용 사례에서 이것은 완벽합니다.

문제는 내가이 플렉스 컨테이너 안에 각각 <div>을 가지고 있기 때문에 부모의 전체 높이를 차지해야한다는 것입니다. 나는 그들에게 단지 min-height: 100%을 설정할 수 있다고 생각했다. 이 솔루션은 Firefox와 Internet Explorer에서 작동하지만 Chrome에서는 작동하지 않습니다.

다음은 문제를 보여주는 코드입니다. 크롬에서이 값을 보면 더 짧은 흰색 .card이 자주색 .card_container을 채우지 않는다는 것을 알 수 있습니다. 그러나 이것을 IE 나 FF로 보면 부모 컨테이너의 높이를 채울 것입니다. 내가 찾은 주위에

#grid { 
 
    background: rgba(255,0,0,0.2); 
 
    padding: 10px; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex;  
 
} 
 

 
.card_container { 
 
    width: 300px; 
 
    background: rgba(0,0,255,0.2); 
 
    margin: 15px; 
 
    padding: 5px; 
 
} 
 

 

 
.card { 
 
    background: white; 
 
    min-height: 100%; /* <- Why isn't this working? */ 
 
}

<div id="grid"> 
 
    <div class="card_container"> 
 
    <div class="card"> 
 
     This text is very short. 
 
    </div> 
 
    </div> 
 
    <div class="card_container"> 
 
    <div class="card"> 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
    </div> 
 
    </div> 
 
</div>

한

일뿐만 아니라 .card_container에게 플렉스 컨테이너를 만들기 위해 명시 적으로 width: 100%에 .card을 설정하는 것입니다.

예를 들어, 스 니펫은 다음과 크롬, FF와 IE에서 작동하는 것 같다 :이 해결 그래도 필요한 이유가 궁금하네요

#grid { 
 
    background: rgba(255,0,0,0.2); 
 
    padding: 10px; 
 

 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
} 
 

 
.card_container { 
 
    width: 300px; 
 
    background: rgba(0,0,255,0.2); 
 
    margin: 15px; 
 
    padding: 5px; 
 
    
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 

 

 
.card { 
 
    width: 100%; 
 
    background: white; 
 
}

<div id="grid"> 
 
    <div class="card_container"> 
 
    <div class="card"> 
 
     This text is very short. 
 
    </div> 
 
    </div> 
 
    <div class="card_container"> 
 
    <div class="card"> 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
    </div> 
 
    </div> 
 
</div>

. 제가 잘못했거나 버그입니까? 아무도 어디서나 문서화되어 있다면 알 수 있습니까?

Answer 1

플렉스 아이템에 공간을 사용하지 마십시오. 플렉스 컨테이너에 장착

-webkit-align-items: flex-start;