如何确保元素不会在flexbox模型中造成包裹

Question

让我们拿下面的小提琴：http://jsfiddle.net/wQP8p/

<div class="card">
<div class="preview"></div>
<div class="name">Super Long Title Because I Want To Do It So</div>
<div class="extra">OK</div>
</div>

和CSS

.card {
display: flex;
flex-wrap: wrap;
width: 200px;
}
.preview {
width: 100%;
padding-top: 45%;
background: red;
}
.name {
flex: auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: yellow;
}
.extra {
flex: none;
background: blue;
}

我该怎么做才能保留省略号，并将蓝色元素放在黄色元素的左边？

Answer 1

不幸的是，Flexbox不能以这种方式工作。如果你想让弹性物品并排出现，你必须给它们一个合适的弹性基准值，让它们在启用包装时能够放在弹性容器中(弹性收缩在这里也没有任何作用)。

http://jsfiddle.net/wQP8p/2/

.name {
flex: 1 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: yellow;
}
.extra {
flex: 1 20%;
background: blue;
}

如果内容是动态的(即，您不知道要设置的实际宽度)，则必须在这些元素周围添加一个包装器。

Answer 2

您可以将.extradiv放在.namediv中，并将display:inline-block;应用于.extra类，如本JSFiddle所示。

编辑：这可能不是一个最佳实践，但它似乎达到了你所追求的美学。