CSS Flex：文本从容器中转义

Question

我无法弄清楚CSS flex布局的问题。

HTML：

<div class="image-view">
    <div class="info">
        <span class="label title">d37ci4x.jpg</span>
        <span class="label scale">100%</span>
    </div>
    <img src="http://i.imgur.com/rfcsACA.png" />
</div>

CSS：

.image-view {
    display: inline-block;
    border: 1px #000 solid;
}

.image-view .info {
    display: flex;
    border-bottom: 1px #000 solid;
}

.image-view .info .title {
    overflow: hidden;
    white-space: nowrap;
    flex: 5 1 100%;
}

.image-view .info .scale {
    flex: 1 0 1em;
    padding-left: 2em;
    border-left: 1px #000 solid;
}

结果：

也住在http://jsfiddle.net/omhaohyd/

这里的问题是“100％”文本以某种方式从容器中向右推。删除填充没有帮助 - 它正确收缩容器并将文本向上移动到左边缘，但容器最终太小，因此文本仍然流出它。给.scale更多空间（增加1em并减少.title'100%）确实可以修复它，但在“100％”周围增加了很多空格好吧，我根本不想那么大。

这是在Lubuntu x64上的Firefox 30.0中。

Answer 1

这是因为对于.scale元素，您使用以下flex属性：flex: 1 0 1em;，它将其计算的宽度限制为最大1em。结合2em左侧填充，您将其分配给文本，这会导致文本被推出容器。

可能的解决方法是删除flex-basis属性并将其设置为自动，即flex: 1 0 auto：http://jsfiddle.net/teddyrised/omhaohyd/2/

Answer 2

这将显示接近您想要的内容。

.image-view .info .scale {
    flex: 1 0 3em;
    padding-left: .5em;
    border-left: 1px #000 solid;
}