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

从下面的代码片段( 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,.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 ;.

参见这里的w3c在flexBoxes http://www.w3.org/TR/css3-flexbox/#flex-items

“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容器是一个块元素(这发生在所有元素的位置：absolute;)，从而消除了它的灵活性，而且因为它的内容不是块元素，它们是flex子元素，它们只能影响一个flex级别容器不是一个块。

Jquery解决方案

对，所以有一种方法可以用jquery来做。

这可能不是你想要的，因为它不是CSS，但它的工作。

我在这里做的是将容器的宽度缩小到原来的宽度。

然后获取每个第六个元素的最大宽度(因为这是当你的行的中断形成一个新的列)。

然后计算总数列，并使用它将每列的最大宽度乘以列数，然后最终将其全部添加到一起以获取容器的所需宽度。

随意取走并添加新专栏以全面测试。

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不扩展以适应内容

解决方法

猜你在找的CSS相关文章