绝对定位的flexbox不会扩展以适应内容

Question

从下面的Snippet(View as Fiddle)中可以看到,绝对定位的柱状flexbox不会扩展以适应其子节点.

例如,在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;.

请参阅此处了解有关flexboxes的w3c http://www.w3.org/TR/css3-flexbox/#flex-items

"flex项目本身就是灵活级别的盒子,而不是块级别的盒子:它们参与其容器的flex格式化上下文,而不是块格式化上下文."

通过改变position:absolute;你强制flex容器成为一个块元素(这种情况发生在所有元素上position:absolute;),从而消除了它的灵活性,并且因为它的内容不是块元素,它们是flex子,它们只能影响flex级容器不是一个块.

Jquery解决方案

对,所以有一种方法可以用jquery来做.

这可能不是你想要的,因为它不仅仅是CSS,但确实有效.

我在这里做的是让容器的宽度达到原来的宽度.

然后得到每个第6个元素的最大宽度(因为那是你的行中断以形成一个新列).

然后计算所有列的总数,并使用它来将每列的最大宽度乘以列的数量,然后最后将它们全部加在一起以获得所需的容器宽度.

随意拿走并添加新专栏来测试它.

小提琴

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>