为什么 width:100% 的元素不采用父元素的宽度？

Question

我面临的问题是我无法在弹性盒项目中设置与其父项相同的宽度。

这是代码，该类的跨度与其父级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变成 blockvia display。

.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 {
  display:block;/* <= display instead or with width will do */
  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 2

您的spanclass 元素theSpan是 Flex 项目 ( .item1) 的子元素。

此弹性项目不是弹性容器。

因为只有 Flex 容器的子容器参与 Flex 布局，所以跨度（孙容器）不合格。它不存在于Flex 格式化上下文中。

该跨度存在于标准块格式化上下文中。

在 BFC 中，span默认情况下，a 是内联的、不可替换的元素。

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

10.2 内容宽度：width 属性

此属性不适用于非替换的内联元素。未替换内联元素框的内容宽度是其中渲染内容的宽度。

10.3.1 内联、非替换元素

该width属性不适用。