Why is an element with width:100% not taking the parent's width?

Question

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\'

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