Flex item exceeds its container - css

Question

I have a flex container with a defined width. Container has flex-direction: row and 2 columns. One is fixed width, it is inflexible. The other is flexible and should fit all container's remaining space.
When flexible column content is long enough it overflows the container, exceeds its width.
Why is that happening? And how should I fix it right way?
Note: I already solved it by using flex: 1 0 0 instead of 1 0 auto and it would be just fine. But I just don't understand why it stops exceeding the parent and why it starts wrapping the content? Is it even the right way to do it?
HTML:
<div class="flex-container">
<div class="flex-item inflexible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="flex-item flexible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
CSS:
.flex-container {
display: flex;
flex-direction: row;
width: 500px;
background-color: green;
}
.flex-item {
display: block;
margin: 20px 0;
}
.inflexible {
flex: 0 0 auto;
width: 100px;
background-color: red;
}
.flexible {
flex: 1 0 auto;
background-color: blue;
}
The JSFiddle

Answer 1

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

Answer 2

With flex: 1 0 auto in .flexible you set the following
1 is flex-grow and its set to grow
0 is flex-shrink so you set that to don't shrink
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>

Answer 3

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.

Answer 4

I think you're misunderstanding one or two of the flex values here, if I understand you correctly. Consider the following codepen:
http://codepen.io/anon/pen/NALvPw
Check this out:
.your-flex-item { /*(child, not container)*/
flex: <flex-grow> <flex-shrink> <flex-basis>;
}
Yours was:
.inflexible {
flex: 0 0 auto;
width: 100px;
background-color: red;
}
.flexible {
flex: 1 0 auto;
background-color: blue;
}
If you prefer doing it this way, I suggest changing the auto value to your desired width, so more like this:
.inflexible {
flex: 0 0 100px; /*auto changed to 100px*/
width: 100px;
background-color: red;
}
.flexible {
flex: 1 0 auto; /* 1 0 auto will grow to whatever 'auto' will allow it to grow to. Put in size here for it to grow 'up-to' that size. */
background-color: blue;
}

Answer 5

Update flex: 1 0 auto; to just flex: 1 in .flexible. And remove flex: flex: 0 0 auto; from .inflexible.
To understand more about flexbox check https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Updated Fiddle.
.flex-container {
display: flex;
flex-direction: row;
width: 500px;
background-color: green;
}
.flex-item {
display: block;
margin: 20px 0;
}
.inflexible {
flex: 0 0 auto;
width: 100px;
background-color: red;
}
.flexible {
flex: 1 0 auto;
background-color: blue;
}
.solution .flexible {
flex: 1 0 0;
}
.question {
margin-bottom: 20px;
}
<div class="question">
<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>
</div>
<div class="solution">
<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>
</div>

Answer 6

The flex-wrap property is a sub-property of the Flexible Box Layout module.
It defines whether the flex items are forced in a single line or can be flowed into multiple lines.
The flex-wrap property accepts 3 different values:
nowrap (default): single-line which may cause the container to overflow
wrap: multi-lines, direction is defined by flex-direction
wrap-reverse: multi-lines, opposite to direction defined by flex-direction
SO
try to use flex-wrap to make the flex items in multiply lines.