IE11 , min-height flex 이슈

min-height 문제

소스코드

html

    <div class="container">
        <div class="flexBox">
            <div class="item">item 1</div>
            <div class="item">item 2</div>
        </div>
    </div>

css

        .container {
            width : 200px;
            height : 200px;
            border: 2px solid red;
        }

        .flexBox {
            display: flex;
            flex-direction: column;
            min-height: 50px;
            justify-content: center;
            border: 2px solid blue;
        }

* IE11에서는 flex 영역의 min-height값을 인식하지 못합니다.
* 영역은 min-height값을 잡지만 flex는 높이를 인식하지못하여 justify-content : center 임에도 위쪽으로 처리됩니다.

해결방법

* min-height가 적용되지 않는 태그를 감싸는 태그 추가합니다.
* 가로 정렬되는 flex를 선언후 가상요소로 min-height를 상속합니다.

소스코드

html

    <div class="container">
        <div class="inner">
            <div class="flexBox">
                <div class="item">item 1</div>
                <div class="item">item 2</div>
            </div>
        </div>
    </div>

css

        .container {
            width : 200px;
            height : 200px;
            border: 2px solid red;
        }

        .inner {
            display: flex;
            flex: 1 1 auto;
            min-height: 100px;
        }
        .inner::after{
            display: block;
            min-height: inherit;
            font-size: 0;
            content: '';
        }
        .flexBox {
            display: flex;
            width: 100%;
            flex-direction: column;
            justify-content: center;
            border: 2px solid blue;
        }

참조

• https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042