Изготовление колонны из гибкой коробки используйте имеющуюся ширину.

Question

Существует контейнер, который имеет гибкую ширину и ряд жидкостных блоков внутри него. Моя цель - использовать все свободное пространство слева направо внутри этого контейнера.

Flexbox с гибким «колонкой» идеально подходит для моего сценария. У меня есть одна проблема: , если я не укажу высоты контейнера, внутренние блоки выравниваются в один столбец (когда я ожидаю, что они сформируют несколько столбцов).

Вот пример: 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

Удаление «обертывания» имеет тот же эффект, что и добавление нежелательной максимальной высоты. Если у вас есть обертка по какой-то причине, которая сейчас не очевидна для меня, извините, тогда вы можете добавить «flex-grow: 1» и сохранить «обертку», которая по-прежнему имеет тот же эффект, что и добавление абсолютного max- высота. Если все остальное не работает, установите max-height в 0px; надеюсь, что это поможет :-)