我在 flex 容器中有两列。其中一列(橙色列)包含一个头像，其宽度应恰好为容器的 10%。
另一列(蓝色列)包含面板，面板的标题可能很长，因此我应该通过 css 将其截断。这张图片显示了我的期望:
我的期望:
但是当我尝试执行 text-overflow: ellipsis 时，我的第二行变得比 flex 容器更宽。这是此行为的示例:
https://jsfiddle.net/8krtL9ev/1/
.container {
background: #ddd;
width: 400px;
height: 200px;
padding: 10px;
display: flex;
}
.row1 {
background: red;
flex-basis: 10%;
flex-shrink: 0;
}
.row2 {
background: blue;
flex-basis: 90%;
margin-left: 10px;
padding: 10px;
display: flex;
}
.panel {
background: green;
flex-basis: 50%;
overflow: hidden;
}
.panel-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="container">
<div class="row1">
</div>
<div class="row2">
<div class="panel">
<div class="panel-title">
<span>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</span>
</div>
</div>
</div>
</div>
我该如何解决这个问题？
使用 width 代替 flex-basis。因为在 this Documentation他们提到
9.9.3. Flex Item Intrinsic Size Contributions
The main-size min-content/max-content contribution of a flex item is
its outer min-content/max-content size, clamped by its flex base size
as a maximum (if it is not growable) and/or as a minimum (if it is not
shrinkable), and then further clamped by its min/max main size
properties.
不要忘记将宽度 calc(90% - 30px) 设置为 row2 宽度
.container {
background: #ddd;
width: 400px;
height: 200px;
padding: 10px;
display: flex;
}
.row1 {
background: red;
/* flex-basis: 10%; */
width: 10%;
flex-shrink: 0;
}
.row2 {
background: blue;
/* flex-basis: 90%; */
width: calc(90% - 30px);
margin-left: 10px;
padding: 10px;
display: flex;
}
.panel {
background: green;
flex-basis: 50%;
overflow: hidden;
}
.panel-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="container">
<div class="row1">
</div>
<div class="row2">
<div class="panel">
<div class="panel-title">
<span>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</span>
</div>
</div>
</div>
</div>