How do I make my flex item (article
in this example), which has flex-grow: 1;
not to overflow it\'s flex parent/container (main<
Instead of flex: 1 0 auto
just use flex: 1
main, aside, article {
margin: 10px;
border: solid 1px #000;
border-bottom: 0;
height: 50px;
}
main {
display: flex;
}
aside {
flex: 0 0 200px;
}
article {
flex: 1;
}
<main>
<aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
<article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>
If you want the overflow to wrap: flex-flow: row wrap
Your flex items have
flex: 0 0 200px; /* <aside> */
flex: 1 0 auto; /* <article> */
That means:
The <aside>
will start at 200px
wide.
Then it won't grow nor shrink.
The <article>
will start at the width given by the content.
Then, if there is available space, it will grow to cover it.
Otherwise it won't shrink.
To prevent horizontal overflow, you can:
flex-basis: 0
and then let them grow with a positive flex-grow
.flex-shrink
to let them shrink if there isn't enough space.To prevent vertical overflow, you can
min-height
instead of height
to allow the flex items grow more if necessaryoverflow
different than visible on the flex itemsoverflow
different than visible on the flex containerFor example,
main, aside, article {
margin: 10px;
border: solid 1px #000;
border-bottom: 0;
min-height: 50px; /* min-height instead of height */
}
main {
display: flex;
}
aside {
flex: 0 1 200px; /* Positive flex-shrink */
}
article {
flex: 1 1 auto; /* Positive flex-shrink */
}
<main>
<aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
<article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>
I know this is really late, but for me, I found that applying flex-basis: 0;
to the element prevented it from overflowing.
One easy solution is to use overflow
values other than visible
to make the text flex basis width reset as expected.
Here with value auto
the text wraps as expected and the article content does not overflow main container.
Also, the article flex
value must either have a auto
basis AND be able to shrink, OR, only grow AND explicit 0
basis
main, aside, article {
margin: 10px;
border: solid 1px #000;
border-bottom: 0;
height: 50px;
overflow: auto; /* 1. overflow not `visible` */
}
main {
display: flex;
}
aside {
flex: 0 0 200px;
}
article {
flex: 1 1 auto; /* 2. Allow auto width content to shrink */
/* flex: 1 0 0; /* Or, explicit 0 width basis that grows */
}
<main>
<aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
<article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>
max-width
works for me.
aside {
flex: 0 1 200px;
max-width: 200px;
}
Variables of CSS pre-processors allows to avoid hard-coding.
aside {
$WIDTH: 200px;
flex: 0 1 $WIDTH;
max-width: $WIDTH;
}
overflow: hidden
also works, but I lately I try do not use it because it hides the elements as popups and dropdowns.