[CSS] flex: 1 받은 자식 요소에 반응형 height 값 주기

See the Pen Untitled by miyeon (@auseyoo) on CodePen.

(위의 창을 줄여보세요!)

 

부모가 display:flex 이고, 이에 따라 자식 요소인 box1, box2가 flex: 1,  flex:2 의 값을 받았다.

flex: 1, flex:2 이를 반응형을 미디어쿼리로 줄때 height 값이 먹지 않는다.

그 이유는 flex로 받았기 때문에, 같은 flex가 갖고 있는 값으로 주어야 먹기 때문이다.

flex:1 은 참고로 아래를 포함하는 값이다.

 

flex:1 = flex-grow: 1 + flex-shrink: 0 + flex-basis: auto

 

따라서, 반응형을 줄때 높이값을 조정하고 싶으면 flex-basis 값을 50px로 주어야 높이값이 조정된다.