Flex item exceeds its container

With flex: 1 0 auto in .flexible you set the following

1. 1 is flex-grow and its set to grow
2. 0 is flex-shrink so you set that to don't shrink
3. auto is flex-basis which in this case refers to width which is determined by the flex item's contents.

Also you can't use display: block in flex-container it doesn't work. Default value of flex-direction is row so you can remove that. You can set fixed width of .inflexible like this flex: 0 0 100px;. And for .flexible you can just use flex: 1 and it will take rest of free width.

.flex-container {
  display: flex;
  width: 500px;
  background-color: green;
}
.flex-item {
  margin: 20px 0;
}
.inflexible {
  flex: 0 0 100px;
  background-color: red;
}
.flexible {
  flex: 1;
  background-color: blue;
}

<div class="flex-container">
  <div class="flex-item inflexible">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, cupiditate earum quos! Laborum quibusdam dolor temporibus corporis
  </div>
  <div class="flex-item flexible">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi sed ab voluptatum obcaecati repudiandae, quia architecto ipsa deserunt recusandae dolorum harum, aperiam sint, molestias iure voluptatem doloremque. In, rem.
  </div>
</div>

In http://www.w3schools.com/cssref/css3_pr_flex-basis.asp it says the following about flex-basis: auto:

The length is equal to the length of the flexible item. If the item has no length specified, the length will be according to its content

flex-basis is the third property set by the flex property shorthand.

So if you set it to auto, the .flexible div's maximum width (depending on its content) will be the width of the display: flex container.

To achieve expected result, specify the width for the .flexible class as well

.flexible { 
    flex: 1 0 auto; 
    width: 200px;
    background-color: blue; 
    word-wrap: break-word;
}

http://codepen.io/nagasai/pen/LkJzLz