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

You should turn the span into block via 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;
}

  

    abcdefg
  
  

    1
  
  

    2