css - 使 flexbox 列使用可用宽度

Question

有一个宽度可变的容器，里面有许多流体 block 。我的目标是使用此容器内从左到右的所有可用空间。

具有 flex-direction “column” 的 Flexbox 几乎完全适合我的场景。我有一个问题:除非我指定容器的高度，否则内部 block 将自己对齐到 1 列(当我希望它们形成多列时)。

这是一个例子:http://jsfiddle.net/kopgjpsp/1/

css

    .box {
    display: flex;
    flex-flow: column wrap;
    -webkit-flex-flow: column wrap;
    justify-content: flex-start;
    max-width: 600px;
    /*max-height: 100px -- I am trying to avoid this*/
}

.box .fluid_block {
    max-width: 250px;
}

.fluid_block .title {
    padding-right: 30px;
    width:100px;
    display: inline-block;
    vertical-align: top;
}

.fluid_block .value {
    display: inline-block;
    max-width: 100px;
}

html:

<div class="box">
    <div class="fluid_block">
        <div class="title">Fluid block 1</div> 
        <div class="value">some content</div>
    </div>
    <div class="fluid_block">
        <div class="title">Fluid block 2</div> 
        <div class="value">some content some content some content</div>
    </div>
        <div class="fluid_block">
        <div class="title">Fluid block 3</div> 
        <div class="value">some content some content some content some content</div>
    </div>
        <div class="fluid_block">
        <div class="title">Fluid block 3</div> 
        <div class="value">some content some content some content some content</div>
    </div>
</div>

我目前看到的解决方案是用JS计算宽度并设置它，但是它很丑而且很昂贵，所以我想尽可能避免。

如果有任何建议，我将不胜感激!

Answer 1

删除“wrap”与添加不需要的最大高度具有相同的效果。如果您出于某种目前对我来说不明显的原因使用了包装，抱歉，那么您可以改为添加“flex-grow:1”并保留“包装”，这仍然与添加绝对最大-具有相同的效果高度。如果一切都失败了，将 max-height 设置为 0px；希望这有帮助:-)