绝对定位的flexbox不会扩展以适合内容 [英] Absolutely positioned flexbox doesn't expand to fit contents

问题描述

从下面的代码段可以看出（查看为小提琴），一个绝对定位的柱状弹性箱

例如，在Chrome中，它将只有最宽的子元素宽度，并且只有最短的列。

编辑：的项目将是动态的，每个项目中的文本也将是动态的。

  * {box-sizing：border-box;} ul {background：＃090;显示：flex; flex-flow：柱包装; left：0; list-style：none; max-height：202px; padding：5px;位置：绝对; 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>第0行< / li> < li>第1行< / li> < li>第2行< / li> < li>第3行< / li> < li>第4行< / li> < li>第5行< / li> < li>第6行< / li> < li>第7行< / li> < li>第8行稍长一些< / li>< / ul>  

解决方案

具有 position：absolute; 的弹出框不再被视为弹性框，因此您当前的问题。

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

---

在这里查看flexbox上的w3c http://www.w3.org/TR/css3-flexbox/#flex-items

flex项本身是flex-level框，而不是块级框：他们参与他们的容器的flex格式化上下文，而不是在块格式化上下文。

通过改变为 position：absolute; 你强制flex容器是一个块元素（这发生在所有元素， code> position：absolute; ），因此消除了它的灵活性，也因为它的内容不是块元素，他们是flex孩子他们只能影响flex级容器而不是一个块。

---

The Jquery Solution

右，所以有一个方法可以用jquery做。

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

我在这里做的是获取容器的宽度在其原始宽度。

然后获取最大宽度每个第6个元素（因为这是当你的行断开形成一个新的列）。

然后计算总数列，并使用乘以每个的最大宽度列乘以列数，然后最后将它们加在一起，以获得所需的容器宽度。

随意取出并添加新列以进行测试

小提琴

  ul.flex-container {background：＃090;显示：flex; flex-flow：柱包装; 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>第0行< / li> < li>第1行< / li> < li>第2行< / li> < li>第3行< / li> < li>第4行< / li> < li>第5行< / li> < li>第6行< / li> < li>第7行< / li> < li>第8行稍长一些< / li> < li>第0行< / li> < li>第1行< / li> < li>第2行< / li> < li>第3行< / li> < li>第4行< / li> < li>第5行< / li> < li>第6行< / li> < li>第7行< / li> < li>第8行稍长一些< / li>< / ul>  

As you can see from the Snippet below (View as Fiddle), an absolutely positioned, columnar flexbox won't expand to fit its children.

In Chrome, for example, it will only be as wide as the widest child element and as tall as the shortest column.

Can anyone suggest a solution without using any additional markup?

Edit: The number of items in the list will be dynamic, as will the text in each item. I need to break to a new column after a set number of items.

*{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>

解决方案

A flex box with the position:absolute; is no longer considered a flex box hence your current issue.

You must use predefined widths and heights if your going to use position:absolute;.

---

See here for w3c on 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."

By changing to position:absolute; you force the flex container to be a block element (this happens to all elements with position:absolute;), thus eliminating the flexible nature of it and also because its contents are not block elements they are flex children they can only effect a flex level container not a block one .

---

The Jquery Solution

Right so there is a way to do it with jquery.

This might not be what you wanted because it's not CSS only but it does work.

What I'am doing here is getting the width of the container at its original width.

Then getting the max width of every 6th element (because that's when your row's break to form a new column).

Then counting the total number columns there is and use that to multiply the max width of each column by the number of column's and then finally add it all together to get the desired width of your container.

feel free to take away and add new column's to test it all out.

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>

这篇关于绝对定位的flexbox不会扩展以适合内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！