Romeno Romeno - 4 months ago 21
CSS Question

Flex item extends its container

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

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

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