html - 为什么宽度为 :100% not taking the parent's width? 的元素

Question

我面临的问题是我无法在 flexbox 元素中设置与其父项相同的宽度。

这是代码，theSpan 类的跨度与其父类的width 不同。

.container {
  display: flex;
}
.item1 {
  flex: 1 1 200px;
  border: 5px solid yellow;
}
.item2 {
  flex: 1 1 200px;
  border: 5px solid blue;
}
.item3 {
  flex: 1 1 200px;
  border: 5px solid red;
}
.theSpan {
  width: 100%;
  border: 2px solid black;
}

<div class='container'>
  <div class='item1'>
    <span class='theSpan'>abcdefg</span>
  </div>
  <div class='item2'>
    <span>1</span>
  </div>
  <div class='item3'>
    <span>2</span>
  </div>
</div>

Answer 1

您的 span 元素具有 theSpan 类是 flex 元素 (.item1) 的子元素。

这个 flex 元素不是 flex 容器。

因为 only the children of a flex container participate in flex layout , 跨度(孙子)被取消资格。它不存在于 flex formatting context 中.

跨度存在于标准block formatting context .

在 BFC 中，span 默认是一个内联的、不可替换的元素。

规范中提供了 width: 100% 不起作用的原因:

10.2 Content width: the width property

This property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them.

10.3.1 Inline, non-replaced elements

The width property does not apply.