Flex Child Is Growing Out of Parent

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

How can I make Flexbox children 100% height of their parent?

Use align-items: stretch

Similar to David Storey's answer, my workaround is:

.flex-2 {
    display: flex;
    align-items: stretch;
}

Note that height: 100% should be removed from the child component (see comments).

Alternatively to align-items, you can use align-self just on the .flex-2-child item you want stretched.

Why doesn't the nested flex parent height grow with children?

This is the logical behavior and its how the algorithm of flexbox works. To start, let's remove some properties especially the flex-shrink:0.

html,body{  height:100%;  margin:0;}.grand-parent{  height:100%;  overflow:auto;  display:flex;}.parent{  display:flex;  flex-direction:column;  min-height:100%;  width:100%;}
.child{  height:1500px;  width:100%;  display:flex;}
.green{  background:green;}
.blue{  background:blue;}

<div class="grand-parent">  <div class="parent">    <div class="child green"></div>    <div class="child blue"></div>  </div></div>

Prevent flex PARENT from growing without overflow: hidden

You can remove "overflow-y: hidden" and add "height: 100%" to .splitView and -section.

.splitView{
    display: flex
    flex: 1 1 auto
    background: rgba(#008080, 0.2)
    height: 100%
    &-section{  
        display: flex
        flex-direction: column
        flex: 1 1 50%
        height: 100%
    }
}

Since the height of the parent div is set, the children divs will inherit that height.

https://codepen.io/salixdubois/pen/JQLaRE

The children of a flex container exceed the parent

In order to wrap item_container must know the width.

chart_container got 2 child chart and item_container. First child chart got fixed width 100, second child must fill rest of the space in order to do the wrap children.

item_container: {
  flex: 1,
  backgroundColor: "green",
  flexDirection: "row",
  flexWrap: "wrap"
},

absolute positioned parent with a flex growing child not inheriting width

You have to set a width for the parent. That is because whenever an element is positioned absolutely the width and height is automatically set to auto. So in your case the child's flex-wrap: wrap will cause an overflow unless a width is specified for the absolutely positioned parent.

.parent {
  color: white;
  background: blue;
  margin: auto;
  padding: 1em;
  position: absolute;
  left: 10px;
  top: 100px;
  width: calc(100% - 20px); /* can be any value */
}
.child {
  background-color: green;
  display: flex;
  height: 100px;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0;
}

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>

---

Related Topics