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
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;
}