我有一个带有已定义width
的flex容器。容器有flex-direction: row
和2列。一种是固定宽度,它是固定的。另一个很灵活,应该适合所有容器的剩余空间。
当灵活的列内容足够长时,它将使容器溢出,并超出其宽度。
为什么会发生?我应该如何正确解决呢?
注意:我已经通过使用flex:1 0 0而不是1 0 auto解决了它,这很好。但是我只是不明白为什么它不再超过父,为什么它开始包装内容?它甚至是正确的方法吗?
HTML:
<div class="flex-container">
<div class="flex-item inflexible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="flex-item flexible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
CSS:
.flex-container {
display: flex;
flex-direction: row;
width: 500px;
background-color: green;
}
.flex-item {
display: block;
margin: 20px 0;
}
.inflexible {
flex: 0 0 auto;
width: 100px;
background-color: red;
}
.flexible {
flex: 1 0 auto;
background-color: blue;
}
JSFiddle
最佳答案
为了获得预期的结果,还要为.flexible类指定宽度
.flexible {
flex: 1 0 auto;
width:200px;
background-color: blue;
word-wrap:break-word;
}
http://codepen.io/nagasai/pen/LkJzLz
关于css - flex 物品超出其容器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38723559/