包含挡路内容的Flexbox项目溢出Flexbox容器
问题
类似按钮的挡路内容会导致我的弹性项展开并溢出FlexBox容器。
预期行为
在此示例中,按钮应该与用省略号隐藏的按钮文本溢出并排显示。弹性项宽度应该基于兄弟项而不是内容,并留在容器内,在容器更改宽度和添加或删除弹性项时保持响应。另一个警告是,对于我的特定方案,我不能在flex项或按钮父div上使用overflow:Hidden。
这里是fiddler。
HTML示例
<div class="container" style="width: 400px;">
<div class="child one">
Child One
<br>Lorem ipsum
<br>dolor sit amet
</div>
<div class="child two"><div><button class="text">Child Two with a loooooooooooooooooong naaaaaaaaaaaaaaaaaaaaaaaaaaaaaame</button><button>button two</button></div></div>
<div class="child three">Some Text</div></div>
示例CSS
div {
border: 3px solid;
}
.container {
padding: 10px;
background-color: yellow;
display: -webkit-flex;
display: flex;
}
.child {
flex: 1 1 auto;
padding: 10px;
margin: 10px;
background-color: #eee;
}
.child.one {
color: green;
}
.child.two {
flex: 6 1 auto;
color: purple;
}
.child.two button {
display: inline-block;
}
.child.three {
color: blue;
}
.text {
text-overflow: ellipsis;
overflow: hidden;
}
edit:现在,我不再尝试显示多个按钮,而是将要求更改为只显示一个按钮。如果有人能够用多个按钮解决这个问题,我仍然会感兴趣。
解决方案
我已经为你们中感兴趣的人提供了答案。然而,我不得不修改我的初始要求。我没有尝试让两个按钮并排显示,而是将其减少到一个按钮。考虑到这一点,这就是答案。这似乎可以跨浏览器工作。
fiddle example of resolution
添加以下样式:
.child {
width: 1%;
}
.child.button {
width: 100%;
}
我很想找人解释一下宽度%是怎么回事?它看起来更像是最小宽度的工作方式。
编辑:感谢Michael_B链接到explanation of width relationship in flex items。
相关文章