CSS3 Flex Box - Div läuft über, wenn es umhüllt wird

Question

Ich versuche, ein ansprechendes Design für eine Web-App zu erstellen, aber ich habe Probleme damit, dass die Größe der Divs beim Umbrechen nicht geändert wird.Ich versuche, Javascript für das Styling möglichst zu vermeiden.

Ich habe ein Wrapper-Div mit flex-flow:column wrap; .Die Divs im Inneren haben eine Mindestbreite, sodass der Bildschirm, wenn er zu kurz wird, in eine Reihe gewickelt wird.Das Problem ist, dass wenn das zweite Div horizontal voll ist, die Größe beim Umbrechen nicht horizontal geändert wird.

Dies ist ein Beispiel für mein Problem:

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

Ich habe das herausgefunden.Endete ich mit CSS Media-Anfragen mit Max-Breiten und Max-Heights.Es ist irgendwie hackisch, Dinge zu tun, aber nichts anderes schien zu arbeiten.

Answer 2

Verwenden Sie die overflow Eigenschaft im übergeordneten Container, um dieses Problem zu vermeiden:

#middle {
overflow: hidden;
}