根据儿童的内容，Chrome不扩展灵活父项 [英] Chrome does not expand flex parent according to children's content

问题描述

我需要显示几个框相邻。每个盒子都有可变数量的子项目。家长应根据儿童物品所占的空间扩大。项目固定宽度是重要的。我正在使用flexbox进行布局。它应该是这样的：

具有讽刺意味的是，如果你在IE 11或者Edge中打开Plunkr，它就可以正常工作了。

我在做什么

以下是一段代码：

  body {display：flex; overflow：scroll;}。parent {border：1px solid gray; padding：0 20px;显示：flex; flex-direction：column;}。items {display：flex;}。items span {flex-basis：25px; flex-shrink：0;} < div class = 亲本 > < h4>父1< / h4> < div class =items> <跨度> I1< /跨度> <跨度> I2< /跨度> <跨度> I3< /跨度> <跨度> 6-14< /跨度> <跨度> I5< /跨度> < / div>< / div>< div class =parent> < h4>父母2< / h4> < div class =items> <跨度> I1< /跨度> <跨度> I2< /跨度> <跨度> I3< /跨度> <跨度> 6-14< /跨度> <跨度> I5< /跨度> < / div>< / div>< div class =parent> < h4>父母3< / h4> < div class =items> <跨度> I1< /跨度> <跨度> I2< /跨度> <跨度> I3< /跨度> <跨度> 6-14< /跨度> <跨度> I5< /跨度> < / div>< / div>< div class =parent> < h4>父母4< / h4> < div class =items> <跨度> I1< /跨度> <跨度> I2< /跨度> <跨度> I3< /跨度> <跨度> 6-14< /跨度> <跨度> I5< /跨度> < / div>< / div>< div class =parent> < h4>父母5< / h4> < div class =items> <跨度> I1< /跨度> <跨度> I2< /跨度> <跨度> I3< /跨度> <跨度> 6-14< /跨度> <跨度> I5< /跨度> < / div>< / div>< div class =parent> < h4>父母6< / h4> < div class =items> <跨度> I1< /跨度> <跨度> I2< /跨度> <跨度> I3< /跨度> <跨度> 6-14< /跨度> <跨度> I5< /跨度> < / div>< / div>  

解决方案

在这段代码中：

  .items span {
 flex-basis：25px; 
 flex-shrink：0; 
} 
  

... Chrome不尊重固定的25像素宽度。或者，至少，容器不能识别空间。它看起来像所有的项目计算中的容器的大小。

简单的解决方法是使用宽度而不是 flex-basis 。

  .items span {
 flex-shrink：0; 
 width：25px; 
} 
  

修改后的演示版本
$ b

---

UPDATE

错误报告

在对嵌套的柔性容器进行大小调整时，基于Flex的基准将被忽略。 p>

是的，这可能是我们有一个糟糕的结果，也许是一个不幸的规格后果...

当外部柔性盒找到所需的内部柔性盒大小时，它要求其最大内容大小（请参阅LayoutFlexibleBox :: computeInnerFlexBaseSizeForChild）。在最大内容大小不考虑 flex-basis ，只有宽度属性/实际的内容，这就是为什么增加一个明确的宽度修正了错误。

I need to display several boxes next to each other. Each box has a variable number of child items. The parent should expand according to the space that the child items are taking up. It is important that the items have fixed width. I'm using flexbox for layout. It should look like this:

I wrote a Plunkr to illustrate.

The problem: Chrome does not expand the parent when the children take up more space. The child items are displayed beyond the parents' boundaries and appear in a neighbouring parent, resulting in this mess:

Ironically, if you open the Plunkr in IE 11 or Edge, it works fine.

What am I doing wrong?

Here's a code snippet:

body {
  display: flex;
  overflow: scroll;
}

.parent {
  border: 1px solid grey;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}

.items {
  display: flex;
}

.items span {
  flex-basis: 25px;
  flex-shrink: 0;
}

<div class="parent">
  <h4>Parent 1</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 2</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 3</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 4</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 5</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 6</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>

解决方案

This appears to be a bug in Chrome.

In this section of code:

.items span {
  flex-basis: 25px;
  flex-shrink: 0;
}

... Chrome is not respecting the fixed 25px width. Or, at least, the container is not recognizing the space. It looks like the container is being sized before all item calculations are factored in.

The simple workaround is to use width instead of flex-basis.

.items span {
    flex-shrink: 0;
    width: 25px;
 }

revised demo

---

UPDATE

Bug Report

Flex-basis is being ignored when sizing nested flex containers.

"Yeah this is kind of a sucky consequence of a bug we have, perhaps combined with an unfortunate spec consequence..."

"When the outer flexbox finds the desired size of the inner flexbox, it asks for its max-content size (see LayoutFlexibleBox::computeInnerFlexBaseSizeForChild). But here's where the bug comes in, the max-content size does not take flex-basis into account, only width properties/actual content. That's why adding an explicit width fixes the bug."

这篇关于根据儿童的内容，Chrome不扩展灵活父项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！