One issue I'm currently experiencing is my inability to match the width of the parent within a flexbox item.
Below is the code snippet, where the span element does not 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>