One issue that can arise when utilizing flexbox is the scenario where, as demonstrated below, the content exceeds the width of the viewport causing the flexbox items to become wider than their container.
What are the factors contributing to this situation?
Is there a way to ensure that the items never exceed the width of the container?
Sample Code:
.container {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.item-1 {
flex: 1 1;
background-color: yellow;
}
.item-2 {
flex: 1 0 100%;
background-color: green;
}<div class="container">
<div class="item item-1">
item1item11item111item1111item11111item111111item1111111item11111111item111111111item1111111111
</div>
<div class="item item-2">
item2item22item222item2222item22222item222222item2222222
</div>
</div>Check out the code pen for reference: