CSS3 Flex Box - 包装时 Div 溢出答案

【问题标题】：CSS3 Flex Box - Div overflows when it wrapsCSS3 Flex Box - 包装时 Div 溢出
【发布时间】：2014-07-22 22:33:42
【问题描述】：

我正在尝试为 Web 应用程序进行响应式设计，但我遇到了 div 在包装时无法调整大小的问题。如果可能的话，我会尽量避免使用 javascript 进行样式设置。

我有一个带有 flex-flow:column wrap; 的包装器 div。里面的 div 有一个最小宽度，所以当屏幕太短时，它会换成一行。问题是如果第二个 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/

【问题讨论】：

标签： css overflow flexbox word-wrap

【解决方案1】：

我想通了。我最终使用了带有 max-widths 和 max-heights 的 CSS 媒体查询。这是一种很老套的做事方式，但似乎没有其他方法起作用。

【讨论】：

【解决方案2】：

使用父容器上的overflow 属性来避免这个问题：

#middle {
overflow: hidden;
}

【讨论】：