CSS：灵活的盒子越过元素的边缘

Question

我是CSS3中灵活盒子的忠实粉丝，但我有一种他们表现得有点奇怪的情况。在<li>中，我有一个文本和时间，我希望彼此相邻：

<li>
    <span>Lorem ipsum dolor sit amet</span>
    <time>10:25</time>
</li>

此时间应与右侧对齐。一些简单的CSS就足够了。

#flexbox li {
    display: flex;
}
#flexbox li time {
    margin-left: auto;
}

在大多数情况下如果工作得很好，但是当文字变得更大时......

正如您所看到的，它越过了包含<div>的边缘。我创建了a Plnkr that demonstrates this.。只是尝试一下，我添加了word-wrap: break-word，但是（正如预期的那样）没有任何改变。

我注意到使用Firefox时效果较差，但仍然越过包含元素的边界。这似乎是一个浏览器的bug。使用Chrome 35和Firefox 30（当前最新版本）。任何想法如何最好地处理这个？

一如既往，提前谢谢。

Answer 1

对于time溢出的情况，我注意到spans的大小比它们包含的文本宽一些。这是一张显示我的意思的图片：http://linenwoods.com/images/capture.png

据我所知，弹性项目的宽度应该基于它们包含的内容（ 对于文本较少的弹性项目的情况）。我观察到将flex: 1 1 0;添加到span fixes这种不一致的情况，但我仍然不明白为什么需要它。

#flexbox li span {
   flex: 1;
}

Answer 2

您只需要在flex:none规则中添加time，以防止它缩小（这是文本溢出时真正发生的事情）。

它会缩小，因为两个弹性项目（<span>和<time>）都以其首选大小开始，然后从那里合作增长或缩小 - 而<span> s很多文字都很贪心。每个<span>的首选尺寸是其所有文字的长度，排列在一行。对于大<span> s，显然不适合，因此两个 flex项目都会缩小，直到它们适合。 （因为<time>开始时要小得多，所以收缩的程度会减少 - 但它会缩小一点。）

如果您在flex:none上使用<time>，则会将其flex-shrink属性设置为0，这会阻止该项目收缩。然后，<span>被迫做所有的成长/收缩，这就是你想要的。

（注意：将来，这实际上是必要的，因为flexbox规范现在有一个默认的minimum width for flex items，这会阻止<time>在这种情况下收缩。这只是尽管如此，最近添加了（返回）规范，因此浏览器还没有赶上。）