HTML 입력이 플렉스 기반 CSS 속성을 무시합니다.

Question

입력란이 플렉스 기반으로 올바르게 인식되지 않습니다. 여기서 입력은 상위 블록의 외측 스팬 순종하지 않는 방법을 예시하는 간단한 예는 (jsfiddle 참조) 여기서

<div> 
    <input> 
    <input> 
</div> 

<style>  
    div { display: flex; width: 200px; border: 2px solid red; } 
    input { flex-basis: 50%; } 
</style> 

는 another, more comprehensive, case이다.

대체 무엇입니까? :)

Answer 1

input 요소는 instrinsicwidth있다 - 그리고 auto에 플렉스 항목의 폭 (플렉스 축을 따라) 기본. min-width: 0를 사용하여이 재설정 - 데모 아래 참조 : 작동

div { 
 
    display: flex; 
 
    width: 200px; 
 
    border: 2px solid red; 
 
} 
 

 
input { 
 
    flex-basis: 50%; 
 
    min-width: 0; /* ADDED */ 
 
}

<div> 
 
    <input> 
 
    <input> 
 
</div>