Why Is An Element With Width:100% Not Taking The Parent's Width?

I am facing the issue that I cannot set the same width as its parent inside a flexbox item. Here is the code and the span with the class theSpan doesn't have the same width as its

Solution 1:

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

This flex item is not a flex container.

Because only the children of a flex container participate in flex layout, the span (a grandchild) is disqualified. It does not exist in a flex formatting context.

The span exists in a standard block formatting context.

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

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

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.

Solution 2:

You should turn the span into block via display.

.container {
  display: flex;
}
.item1 {
  flex: 11200px;
  border: 5px solid yellow;
}
.item2 {
  flex: 11200px;
  border: 5px solid blue;
}
.item3 {
  flex: 11200px;
  border: 5px solid red;
}
.theSpan {
  display:block;/* <= display instead or with width will do */border: 2px solid black;
}

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

Solution 3:

make .item1 a display:flex as well then set the .theSpan as flex:1 and you can set all the items as flex:0 200px since you want to have a flex-basis of 200px you don't need to have flex:1

.container {
  display: flex;
}
.container > div {
  flex: 0200px
}
.item1 {
  display: flex;
  border: 5px solid yellow;
}
.item2 {
  border: 5px solid blue;
}
.item3 {
  border: 5px solid red;
}
.theSpan {
  flex: 1;
  border: 2px solid black;
}

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