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

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: 0 200px
}
.item1 {
  display: flex;
  border: 5px solid yellow;
}
.item2 {
  border: 5px solid blue;
}
.item3 {
  border: 5px solid red;
}
.theSpan {
  flex: 1;
  border: 2px solid black;
}

  

    abcdefg
  
  

    1
  
  

    2