Prevent a Child Element from Overflowing Its Parent in Flexbox

Prevent a child element from overflowing its parent in flexbox

An initial setting on flex items is min-width: auto. This means that a flex item, by default, cannot be smaller than the size of its content.

Therefore, text-overflow: ellipsis cannot work because a flex item will simply expand, rather than permit an overflow. (Scroll bars will not render either, for the same reason.)

To override this behavior, use min-width: 0 or overflow: hidden. More details.

#container {  display: flex;  flex-wrap: wrap;  border: thin solid gray;}
.card-wrapper {  width: 33.33%;  display: flex;  background: #e0e0ff;}
.card {  flex-grow: 1;  margin: 7px;  display: flex;  flex-direction: column;  border: thin solid gray;  background: #e0ffff;  overflow: hidden;        /* NEW */}
.card div {  border: thin solid gray;}
.card div:nth-child(1) {  white-space: nowrap;  text-overflow: ellipsis;  overflow: hidden;        /* NEW */}
.card div:nth-child(2) {  flex-grow: 2;}

<div id="container">  <div class="card-wrapper">    <div class="card">      <div>Title</div>      <div>Multiline<br/>Body</div>      <div>Footer</div>    </div>  </div>  <div class="card-wrapper">    <div class="card">      <div>Really long rambling title that pushes beyond the bounds of the container, unless your screen is really, really wide</div>      <div>Body</div>      <div>Footer</div>    </div>  </div>  <div class="card-wrapper">    <div class="card">      <div>Title</div>      <div>Body</div>      <div>Footer</div>    </div>  </div>  <div class="card-wrapper">    <div class="card">      <div>Title</div>      <div>Body</div>      <div>Footer</div>    </div>  </div>  <div class="card-wrapper">    <div class="card">      <div>Title</div>      <div>Body</div>      <div>Footer</div>    </div>  </div></div>

Prevent flex items from overflowing a container

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:

Use flex-basis: 0 and then let them grow with a positive flex-grow.
Use a positive flex-shrink to let them shrink if there isn't enough space.

To prevent vertical overflow, you can

Use min-height instead of height to allow the flex items grow more if necessary
Use overflow different than visible on the flex items
Use overflow different than visible on the flex container

For 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>

Prevent children of flexbox overflowing parent?

CSS inputs are hard to flex, because they're replaced elements. You have to overwrite some default styles from the OS:

 input {
    min-width:0;
    flex: 1 1 0;
 }

The above code will make them equal in width (start at flex-basis of 0 and grow equally with each other). You may not want that.

If you want one to grow proportionally larger than the other you can change it to:

input[type='text'] {
    flex: 2 1 0;
}

input[type='submit'] {
    flex: 1 1 0;
}

which makes the text input grow at twice the rate of the submit button. i.e. - the text element would take up 2/3 and the submit button would take up 1/3.

How to force flex children not to overflow the container?

The children overflow their parent element because their intrinsic height (the height of their contents) is larger than the parent's height. You can advise the browser to ignore the intrinsic height by setting min-height: 0 on the child elements. If you add overflow: hidden the result should be what you seem to expect:

.container {  display: flex;  flex-direction: column;  background-color: #ccc;  height: 210px;  width: 200px;}.child {  width: 100px;  min-height: 0;  overflow: hidden;}.first {  background-color: rgba(255, 0, 0, 0.2);}.second {  background-color: rgba(0, 255, 0, 0.2);}.third {  background-color: rgba(0, 0, 255, 0.2);}

<div class="container">  <div class="first child">first first first first first first first</div>  <div class="second child">second second second second second second second second second second second second second second second second second second second</div>  <div class="third child">third</div></div>

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

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

flex child is growing out of parent

Solution #1 - Without Scroll

Instead of flex: 1 0 auto on the video container, just use flex: 1. This sizes the item based on available space, not the intrinsic height of the content.

Then, because flex items cannot be smaller than the size of their content – min-height: auto is the default – add min-height: 0 to allow the item to shrink to fit inside the container.

.box-grow {
  flex: 1; /* formerly flex: 1 0 auto; */
  background: green;
  padding: 5px;
  margin: 5px;
  min-height: 0; /* new */
}

.my-box {  height: 300px;  width: 600px;  background: red;  padding: 5px;}.content-box {  background: blue;}.col {  display: flex;  flex-direction: column;  justify-content: space-between}.box-shrink {  flex: 0 1 auto;  background: green;  padding: 5px;  margin: 5px;}.box-grow {  flex: 1; /* formerly flex: 1 0 auto; */  background: green;  padding: 5px;  margin: 5px;  min-height: 0; /* new */}video {  max-height: 100%;  max-width: 100%;  margin: auto;  display: block;}

<div class="my-box col">  <div class="box-shrink">    small sized static content  </div>  <div class="content-box box-grow">    <video controls>      <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">    </video>  </div>  <div class="box-shrink">    small sized static content  </div></div>

Flex child is overflowing the parent container even after setting min-width:0?

There are a couple of issues with what you posted, but fear not we can sort you out.

What is flex, what is not

First let's look at your markup:

.parent is an element with display: flex. From your naming we might incorrectly assume that its children are:

.child1,
.child2, and
.child3.

…but this is not the case.

The children of .parent are actually:

.child1, and
a classless div.

The classless div has no styles set for it, so .child2 and .child3 are not positioned in a flexbox context. For this reason, your min-width: 0 on .child3 doesn't solve your problem, as that solution only applies for flex children.

Applying `min-width` in the correct context

To start, let's give that child div a class: .foo.

.foo itself has a block display, but currently it is allowing content (in .child3) to overflow. It is this element on which we want to prevent overflow:

.foo {
  min-width: 0;
}

That should be all you need. It seems you're already familiar with why we use min-width to help with this, but just in case you can read about it in CSS Tricks: Flexbox and Truncated Text.

Solution

Below is all of it put together.

.parent {
  display: flex;
  border: 2px solid red;
}

.foo {
  min-width: 0;
  outline: 1px solid rebeccapurple;
}

.child1 {
  background: cyan;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
}

.child2 {
  background: pink;
  height: 20px;
  width: 20px;
}

.child3 {
  background: yellow;
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

<div class='parent'>
  <div class='child1'>1</div>
  <div class="foo">
    <div class='child2'>2</div>
    <div class='child3'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper orci erat eu orci.
    </div>
  </div>
</div>

How to prevent flex child from overflowing the parent

I just had to add img {width:100%} at the beginning of css

How to prevent a child from exceeding its parent width in flexbox?

In your code, you have this:

.right {
  display: flex;
  flex: 1 0 auto;
  background: blue;
}

The flex shorthand breaks down to:

flex-grow: 1
flex-shrink: 0
flex-basis: auto

Since you have flex-shrink: 0, the flex item (which is also a flex container), is not able to shrink.

You also have flex-basis set to auto, allowing the item to expand based on content-size.

Put them both together and you have a flex container with no reason to wrap and overflowing content.

You need to either (1) enable flex-shrink or (2) switch to flex-basis: 0.

Make this adjustment to your code:

.right {
  display: flex;
  flex: 1 1 auto; /* fs: 1 (formerly 0) */
  background: blue;
}

.right {
  display: flex;
  flex: 1; /* fg: 1, fs: 1, fb: 0 */
  background: blue;
}

.container {  display: flex;  height: 100vh;}
.side {  flex: 0 0 auto;  width: 3em;  background: yellow;}
.right {  display: flex;  flex: 1 1 auto; /* adjustment */  background: blue;}
.large {  width: 120px;  height: 1em;  background: green;}
.flex {  display: flex;  flex-wrap: wrap;}
body {  margin: 0;}

<div class="container">  <div class="side"></div>  <div class="right">    <div class="flex">      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>      <div class="large"></div>    </div>  </div>
</div>

Prevent a Child Element from Overflowing Its Parent in Flexbox