How to prevent flex-items from overflowing flex parent with no wrap?

18
votes

I have a flexbox with flex-direction: row. The child items have a min-width set. When the window is shrunk past the point where the min-width is reached, the items begin to overflow the flex container.

.parent {
  display: flex;
  flex-direction: row;
  background-color: red;
}

.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

https://jsfiddle.net/4t8029q8/

Is there any way to force the container to stretch to contain the items without setting an explicit min-width on the parent? Doing so provides the behavior I am trying to achieve, but is too rigid to accomodate a variable number of items.

.parent {
  display: flex;
  flex-direction: row;
  background-color: red;
  min-width: 330px
}

.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

https://jsfiddle.net/4t8029q8/1/

This is what I want, for the flex-items to never overflow the flex container even if it causes the page to need a horizontal scroll.

NOTE: I have other more complicated logic requiring flex-basis: 0px and flex-grow: 1, so those lines cannot be removed.

4
htmlcssflexbox

4 Answers

19
votes

Set display: inline-flex on the .parent class to change it to an inline element. This will also force the .parent to expand to contain its children. Then by setting min-width: 100% on the .parent class, it will force it to expand to 100% of the containing element.

.parent {
  display: inline-flex;
  flex-direction: row;
  background-color: red;
  min-width: 100%;
}
.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;

  margin: 5px;
  height: 100px;
  background-color: blue;
}
2
votes

You're forcing your child elements to have a specific width, much like @Michael_B mentioned, this essentially creates a static environment where they will remain the set width regardless of the parent.

Essentially at this point, since you know the min-width of your children elements, I would create a media query, at the specific width requirement, which in this case is 100px. Once your screen reaches said size, force your parent to have wrapping items by adding flex-wrap: wrap; to your parent. When you're outside the said width, be sure to set your parent's CSS back to not allow wrapping, flex-wrap: nowrap; . This will allow your child items to wrap, and your parent will create a horizontal to the page.

0
votes

you can use overflow-y: auto on the parent container, if scrolling doesn't matter you.

.parent {
  display: flex;
  flex-direction: row;
  overflow-y: auto;/*add this.*/
  background-color: red;
}

.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
0
votes

You're asking for the container to re-size fluidly in order to prevent the child elements from overflowing. This is dynamic behavior, which is the realm of JavaScript, not HTML or CSS.

Because the HTML and CSS rendering engines do not automatically re-flow the source documents when child elements overflow their container, there is no way for the container to know when the children have overflowed and, therefore, expand. You're in a static environment. The concept applies to wrapping, as well.

Here's a more detailed explanation (that covers wrapping behavior, but applies to overflow, as well):

You'll need a script or possibly media queries to make your layout work as desired.