CSS3 Flex Box - DIV가 감싸는 경우 오버플로 흐릅니다

Question

웹 앱에 대한 반응 형 디자인을 만들려고 노력하고 있지만 Div가 랩핑 할 때 크기가 맞지 않는 문제가 발생합니다.나는 가능한 모든 경우 스타일링을위한 자바 스크립트를 피하려고 노력하고 있습니다.

Flex-flow가있는 래퍼 Div가 있습니다. 열 랩;내부 Divs는 최소 너비를 가지므로 화면이 너무 짧아지면 행이 줄어 듭니다.문제는 두 번째 DIV가 가로로 가득 차면 랩으로 가로로 조정되지 않는다는 것입니다.

이것은 내 문제의 예입니다.

html :

<div id=wrapper>
    <div id=header>
        Header<br />
        Resize the black box to see the issue.
    </div>
    <div id=middle>
        <div id=middle-left>Middle Left</div>
        <div id=middle-right>Middle-ish from a more vertical point of view but definitely more to the right side, though only if it's not too tall, then it's more of a middle-low vertically.</div>
    </div>
    <div id=bottom>Bottom</div>
</div>

.

CSS3 :

#wrapper {
    border:2px solid;
    padding:10px 40px;
    width:500px;
    height:600px;
    resize:vertical;
    overflow:auto;
    display: flex;
    flex-flow: column nowrap;
}
#header, #middle, #bottom {
    border:1px solid red;
}
#middle-left, #middle-right {
    border:1px solid blue;
    min-height:100px;
    flex:1;
}
#middle-left {
     min-width:200px;   
}

#header {
    flex: 3 1;
}
#middle {
    flex:3;
    display:flex;
    flex-flow:column wrap;
}
#bottom {
    flex:1;
}

.

http://jsfiddle.net/spencer4of6/m474n/4/

Answer 1

나는 이것을 알아 냈다.최대 너비와 최대 높이가있는 CSS 미디어 쿼리를 사용하여 종료했습니다.그것은 일을 할 수있는 일종의 일입니다. 그러나 그 외에는 아무 것도 일하지 않는 것처럼 보입니다.

Answer 2

이 문제를 피하기 위해 상위 컨테이너의 overflow 속성을 사용하십시오.

#middle {
overflow: hidden;
}

.