<分区>
html - 固定，匹配内容并填充相同的 flex 容器
我想做如下布局:
<div class="main">
<div class="container">
<div class="first">
fixed size
</div>
<div class="second">
<span>very very very very very very very long text</span>
<span>other text</span>
</div>
<div class="third">
1000000000000000
</div>
</div>
</div>
看起来像这样:
容器内部应该有三个div:
- 第一个固定大小的div
- 宽度匹配内容的第三个div
- 第二个 div 填充剩余的容器。在那个 div 里面有两个跨度。第一个跨度应该与其父跨度相同，并且包含很长的文本行，如果放不下，则应加点。
我尝试了以下 css 代码:
* {
box-sizing: border-box;
}
.main {
width: 500px;
height: 500px;
border: 1px solid black;
padding: 10px;
}
.container {
display: flex;
width: 100%;
}
.container div {
display: flex;
border: 1px solid black;
}
.first {
flex: 0 0 100px;
}
.second {
flex-direction: column;
flex: 1;
}
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid black;
}
.third {
flex: 0 1 auto;
}
但结果并不如我所愿，因为元素在容器外溢出，长文本没有点缀。
我应该在我的 CSS 中更改什么才能使其正常工作？
最佳答案
您需要在 span 的父级上设置 min-width:0
* {
box-sizing: border-box;
}
.main {
width: 500px;
height: 500px;
border: 1px solid black;
padding: 10px;
}
.container {
display: flex;
}
.container div {
border: 1px solid black;
}
.first {
flex: 0 0 100px;
}
.second {
display: flex;
flex-direction: column;
min-width: 0;
}
span:first-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid black;
}
.third {
flex: 0 1 auto;
}<div class="main">
<div class="container">
<div class="first">
fixed size
</div>
<div class="second">
<span>very very very very very very very very long text</span>
<span>other text</span>
</div>
<div class="third">
1000000000000000
</div>
</div>
</div>关于html - 固定，匹配内容并填充相同的 flex 容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51385375/