CSS3 Flex Box - 它包装时溢出
题
我正在尝试为Web应用程序做出一个响应的设计,但我正在遇到它在包装时没有调整的div的问题。如果可能,我试图避免JavaScript进行样式。
我有一个带有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;
}
.
解决方案
我认为这一点。我最终使用了具有最大宽度和最大高度的CSS媒体查询。这是一种令人寒冷的方式来做事情,但没有别的似乎正在工作。
其他提示
在父容器上使用overflow
属性以避免此问题:
#middle {
overflow: hidden;
}
. 不隶属于 StackOverflow