为什么一个宽度为100％的元素不占用父元素的宽度？ [英] Why is an element with width:100% not taking the parent's width?

问题描述

我遇到的问题是，我无法在flexbox项目中设置与其父项相同的宽度。

I am facing the issue that I cannot set the same width as its parent inside a flexbox item.

这里是代码和span < c $ c> theSpan 与其父级不具有相同的 width 。

Here is the code and the span with the class theSpan doesn't have the same width as its parent.

.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>

推荐答案

span 元素与类 $ c> .item1 ）。

Your span element with class theSpan is a child of a flex item (.item1).

此flex项目不是 flex容器。

This flex item is not a flex container.

因为只有flex容器的子项参与flex布局，
跨度（孙子）取消资格。它不存在于 弹性格式上下文 。

该span位于标准

The span exists in a standard block formatting context.

在BFC中，

In a BFC, a span is, by default, an inline, non-replaced element.

原因 width：100％

The reason width: 100% does not work is provided in the spec:

10.2内容宽度： width
属性

此属性不适用于未替换的内嵌元素。

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.

//www.w3.org/TR/CSS22/visudet.html#inline-widthrel =nofollow> 10.3.1内联，未替换的
元素

10.3.1 Inline, non-replaced elements

width 属性不适用。

这篇关于为什么一个宽度为100％的元素不占用父元素的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！