css – 绝对定位的flexbox不会扩展以适应内容[重复]

参见英文答案 > When flexbox items wrap in column mode,container does not grow its width2个答案正如您从下面的片段( 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,.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>

解决方法

一个位置为绝对的柔性盒;不再被视为弹性盒因此您当前的问题。

如果您要使用position：absolute;，则必须使用预定义的宽度和高度。

有关flexBoxes http://www.w3.org/TR/css3-flexbox/#flex-items的w3c，请参见此处

“flex items themselves are flex-level Boxes,not block-level Boxes: they participate in their container’s flex formatting context,not in a block formatting context.”

通过改变位置：绝对;你强迫flex容器成为一个块元素(这种情况发生在所有元素的位置：绝对;)，从而消除了它的灵活性，并且因为它的内容不是块元素，它们是flex子，它们只能影响flex级别容器不是一个块。

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,.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>

css – 绝对定位的flexbox不会扩展以适应内容[重复]

解决方法

相关文章