Why is flex item wider than container?

Question

When using flexbox, sometimes, like in the example below, when the viewport is not wide enough to contain the content, the flexbox items get higher width than the container.

• When and why does this happen?

• How can I limit the items to never be wider than the container?

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>

Here is a code pen:

https://codepen.io/anon/pen/MqdaoB

Answer 1

try to give some space between character or give word-break to .item

.item {
  word-break: break-word;
}

https://codepen.io/anon/pen/YObyjq