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

问题描述

您可以从下面的代码段中看到（查看为小提示），绝对定位的柱状弹性框不会展开以适应

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

任何人都可以在不使用任何附加标记的情况下提出解决方案？

编辑：列表中的项目数将是动态的，如每个项目中的文本。

  * {box-sizing：border-box;} ul {background ：＃090;显示：flex; flex-flow：柱包装; 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>第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级别框，而不是块级框：它们参与其容器的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屋！