CSS : 고정 분폭과 결합 된 백분율 너비가 한 줄에 맞지 않는 div를 발생시킵니다.

Question

그래서이 문제가 있습니다. 나는 3 개 div로 구성된 웹 사이트의 "반응성"에 대해 연구했습니다. 'A', 'B'및 'C', 모두 96 % 높음) + 바닥 글. A와 C는 같은 등급이고 너비가 35 %입니다. 열 B는 30 % 너비이지만 최소 너비는 200px로 설정됩니다. 브라우저가 축소되어 B 열의 너비가 200 픽셀이되고 더 얇아지지 않고 계속 축소하면 C 열이 아래로 이동합니다. 35 %의 고정 너비와 최대 너비로 채울 수 있도록 노력 중입니다. 최대 너비 : 35 %를 쓰면서; 그것을 실현하기에 충분하지 않습니다. 제안 사항이 있으십니까? 미리 감사드립니다.

Answer 1

HTML

<div class="container"> 
    <div class="col colA">A</div> 
    <div class="col colB">B</div> 
    <div class="col colC">C</div> 
</div> 

CSS는

.container{ 
    display: flex; 
    justify-content: space-between; 
} 
.col{ 
    height: 96%; 
} 
.colA, .colC{ 
    background-color: blue; 
    flex-basis: 35%; 
} 
.colB{ 
    min-width: 200px; 
} 

바이올린 : https://jsfiddle.net/4nhvtbpe/