Абсолютно расположенная гибкая коробка не расширяется, чтобы соответствовать содержимому

Question

Как видно из нижеприведенного фрагмента (View as Fiddle), абсолютно позиционированная столбчатая гибкая коробка не будет расширяться, чтобы соответствовать ее детям.

В Chrome, например, он будет иметь ширину всего самого широкого дочернего элемента и высок как самый короткий столбец.

Может ли кто-нибудь предложить решение без какой-либо дополнительной разметки?

Редактировать: Количество элементов в списке будет динамическим, равно как и текст в каждом элементе. Мне нужно перейти к новому столбцу после определенного количества элементов. не

*{box-sizing:border-box;} 
 
ul{ 
 
    background:#090; 
 
    display:flex; 
 
    flex-flow:column wrap; 
 
    left:0; 
 
    list-style:none; 
 
    max-height:202px; 
 
    padding:5px; 
 
    position:absolute; 
 
    top:0; 
 
} 
 
li{ 
 
    background:rgba(255,0,0,.75); 
 
    color:#fff; 
 
    flex:1 0 30px; 
 
    font-family:arial; 
 
    line-height:30px; 
 
    max-height:30px; 
 
    margin:1px; 
 
    padding:0 2px; 
 
    min-width:100px; 
 
}

<ul> 
 
    <li>Line 0</li> 
 
    <li>Line 1</li> 
 
    <li>Line 2</li> 
 
    <li>Line 3</li> 
 
    <li>Line 4</li> 
 
    <li>Line 5</li> 
 
    <li>Line 6</li> 
 
    <li>Line 7</li> 
 
    <li>Line 8 is a little bit longer</li> 
 
</ul>

Answer 1

гибкой коробки с position:absolute; больше не считаются гибким окном, следовательно, ваш текущим вопросом.

Вы должны использовать предопределенные ширины и высоты, если вы собираетесь использовать position:absolute;.

---

Смотрите здесь для w3c на flexboxes http://www.w3.org/TR/css3-flexbox/#flex-items

«гибкие элементы сами коробки прогибается на уровне, а не на уровне блоков коробки: они участвуют в гибком контексте форматирования своего контейнера, а не в блок форматирования контекст «.

Изменяя к position:absolute; вы вынуждаете гибкий контейнер быть блок-элемент (это случается со всеми элементами с position:absolute;), устраняя таким образом гибкий характер него, а также потому, что его содержимое не блокировать элементы они гибкие дети они могут влиять только на контейнер уровня гибкости, а не на блок.

---

Jquery Решение

правой так что есть способ сделать это с JQuery.

Возможно, это не так, как вы хотели, потому что это не только CSS, но он работает.

Что я здесь делаю, получается ширина контейнера с его первоначальной шириной.

Затем получить максимальную ширину каждого 6-го элемента (потому что это то, когда разрыв строки для формирования нового столбца).

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

не стесняйтесь убирать и добавлять новый столбец, чтобы проверить все это.

Fiddle

var count = $("ul.flex-container li:nth-child(6n)").length; 
 

 
var firstWidth = Math.max.apply(null, $("ul.flex-container").map(function() { 
 
    return $(this).outerWidth(true); 
 
}).get()); 
 

 
var childWidth = Math.max.apply(null, $("ul.flex-container li:nth-child(6n+6)").map(function() { 
 
    return $(this).outerWidth(true); 
 
}).get()); 
 

 
var totalWidth = childWidth * count 
 

 
$("ul.flex-container").css({ 
 
    width: firstWidth + totalWidth, 
 
});

ul.flex-container { 
 
    background: #090; 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    list-style: none; 
 
    max-height: 192px; 
 
    padding: 5px; 
 
    position: absolute; 
 
} 
 
ul.flex-container li { 
 
    background: rgba(255, 0, 0, .75); 
 
    color: #fff; 
 
    flex: 1 0 30px; 
 
    font-family: arial; 
 
    line-height: 30px; 
 
    margin: 1px; 
 
    padding: 0 2px; 
 
    min-width: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul class="flex-container"> 
 
    <li>Line 0</li> 
 
    <li>Line 1</li> 
 
    <li>Line 2</li> 
 
    <li>Line 3</li> 
 
    <li>Line 4</li> 
 
    <li>Line 5</li> 
 
    <li>Line 6</li> 
 
    <li>Line 7</li> 
 
    <li>Line 8 is a little bit longer</li> 
 
    <li>Line 0</li> 
 
    <li>Line 1</li> 
 
    <li>Line 2</li> 
 
    <li>Line 3</li> 
 
    <li>Line 4</li> 
 
    <li>Line 5</li> 
 
    <li>Line 6</li> 
 
    <li>Line 7</li> 
 
    <li>Line 8 is a little bit longer</li> 
 
</ul>

Answer 2

Причина ваши дочерние элементы не будут вписываться в гибком-контейнера является то, что вы установили max-height на контейнере.

Но то, что происходит в вашем оригинальном образце, является странным (особенно дочерние элементы, которые не удаляются из столбца);

похоже, что гибкие элементы не могут распознавать границы контейнера, в то время как flexbox пытается набить их в любом случае (даже изменяя flex-direction:column);
Единственное, что на самом деле имеет смысл, это максимальная ширина самого широкого элемента.

вот фрагмент кода без максимальной ширины:

ul{ 
 
    background:#090; 
 
    display:flex; 
 
    flex-flow:column wrap; 
 
    list-style:none; 
 
    padding:5px; 
 
    position:absolute; /*max-height:192px;*/ 
 
} 
 
/*ul::after{display:table;clear:both; content:''}clearfix*/ 
 
li{ 
 
    background:rgba(255,0,0,.75); 
 
    color:#fff; 
 
    flex:1 0 30px; 
 
    font-family:arial; 
 
    line-height:30px; 
 
    margin:1px; 
 
    padding:0 2px; 
 
    min-width:100px; 
 
}

<ul> 
 
    <li>Line 0</li> 
 
    <li>Line 1</li> 
 
    <li>Line 2</li> 
 
    <li>Line 3</li> 
 
    <li>Line 4</li> 
 
    <li>Line 5</li> 
 
    <li>Line 6</li> 
 
    <li>Line 7</li> 
 
    <li>Line 8 is a little bit longer</li> 
 
</ul>

EDIT

Я не знаю, что ваш желаемый выход, но типичная реализация Flexbox может быть что-то например:

ul{ 
 
    background:#090; 
 
    display:flex; 
 
    flex-flow:column wrap; 
 
    list-style:none; 
 
    padding:5px; 
 
    /*position:absolute;*/ 
 
    height:192px; 
 
} 
 
    /*ul::after{display:table;clear:both; content:''}/*clearfix*/ 
 
li{ 
 
    background:rgba(255,0,0,.75); 
 
    color:#fff; 
 
    flex:1 0 30px; 
 
    font-family:arial; 
 
    line-height:30px; 
 
    margin:1px; 
 
    padding:0 2px; 
 
    /* width:100px;*/ 
 
}

<ul> 
 
    <li>Line 0</li> 
 
    <li>Line 1</li> 
 
    <li>Line 2</li> 
 
    <li>Line 3</li> 
 
    <li>Line 4</li> 
 
    <li>Line 5</li> 
 
    <li>Line 6</li> 
 
    <li>Line 7</li> 
 
    <li>Line 8 is a little bit longer</li> 
 
</ul>