Prevent Flex Items from Overflowing a Container

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>

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

Prevent flex item from overflowing flex container

Much of the CSS in your code can be removed.

It's not necessary or conflicts with useful flex settings.

Just use flex properties to achieve the layout.

.outer {  height: 100vh;  display: flex;  flex-flow: column;}
.inner {  display: flex;  flex: 1;  min-height: 0; /* https://stackoverflow.com/q/36247140/3597276 */}
.column {  overflow-y: auto;  margin: 0 10px;  border: 1px solid #000;}
.column-left {  flex: 0 0 25%;}
.column-right {  flex: 1;  display: flex;  flex-flow: column;}
body, div {  margin: 0;  padding: 0;}

<div class="outer">  <h1>Heading of different height</h1>  <div class="inner">    <div class="column column-left">      <h2>Row</h2>      <h2>Row</h2>      <h2>Row</h2>      <h2>Row</h2>      <h2>Row</h2>      <h2>Row</h2>      <h2>Row</h2>      <h2>Row</h2>      <h2>Row</h2>      <h2>Row</h2>      <h2>Row</h2>    </div>    <div class="column column-right">      <div class="content">        <h2>Row</h2>        <h2>Row</h2>        <h2>Row</h2>        <h2>Row</h2>        <h2>Row</h2>        <h2>Row</h2>        <h2>Row</h2>        <h2>Row</h2>        <h2>Row</h2>        <h2>Row</h2>        <h2>Row</h2>        <h2>Row</h2>        <h2>Row</h2>        <h2>Row</h2>      </div>      <div class="controls">        Variable height        <br> 1      </div>    </div>  </div></div>

How can I prevent last flex item from overflowing parent

Give a height: 100%; to the .panel-popover-window container.

* {  box-sizing: border-box;}
.panel-popover-window {  background-color: grey;  border-bottom: 1px solid black;  display: flex;  flex-direction: column;  width: 1200px;   height: 100%;}
.panel-popover-title-bar {  border: 1px solid black;  width: 100%;  height: 50px;  line-height: 50px;  padding: 0 20px;  position: relative;}
.panel-popover-content {  display: flex;  flex-direction: row;  flex-grow: 1;  flex-shrink: 1;  padding: 5px;  min-height: 0;  overflow-y: scroll;}
.panel-popover-column-2 {  display: flex;  flex-direction: column;  flex: 0 0 50%;}
.panel-popover-panel {  border: 1px solid #e0e0e0;  margin: 5px;  background-color: #fff;}
.panel-popover-panel-title {  display: block;  border-bottom: 1px solid black;  width: 100%;  height: 50px;  padding: 0 10px;  position: relative;}
.panel-popover-footer {  min-height: 60px;  padding: 0 10px;}
.panel-popover-footer-content {  position: relative;}
.panel-popover-footer-button-bar {  width: 100%;  height: 60px;}
.panel-popover-close-button {  border: 1px solid black;  width: 83px;  height: 37px;  float: right;  margin-top: 15px;}
.detail-chat-input {  min-height: 48px;  border: 1px solid black;  border-radius: 5px;  background-color: #fff;  padding: 10px;  width: 100%;  font-size: 15px;  line-height: 30px;}
.detail-activity-scrollable {  overflow-y: scroll;  height: calc(100% - 50px);}.detail-message-container {  min-height: 800px;}
.panel-popover-panel.activity {  max-height: 685px;  overflow-y: hidden;  position: relative;}

<html>  <head>  </head>  <body>    <div class="panel-popover-window detail-popover">      <div class="panel-popover-title-bar">        <span class="panel-popover-title-bar-text">Popover Title</span>        <div class="panel-popover-title-bar-close"></div>      </div>      <div class="panel-popover-content">        <div class="panel-popover-column panel-popover-column-2">          <div class="panel-popover-panel submission-info">            <div class="panel-popover-panel-title">Title 1</div>            <div class="ad-approval-panel-line">Data</div>            <div class="ad-approval-panel-line">Data</div>            <div class="ad-approval-panel-line">Data</div>            <div class="ad-approval-panel-line">Data</div>            <div class="ad-approval-panel-line">Data</div>            <div class="ad-approval-panel-line">Data</div>            <div class="ad-approval-panel-line">Data</div>          </div>          <div class="panel-popover-panel statistics">            <div class="panel-popover-panel-title">Title 2</div>            <div class="ad-approval-panel-line">Data</div>            <div class="ad-approval-panel-line">Data</div>            <div class="ad-approval-panel-line">Data</div>            <div class="ad-approval-panel-line">Data</div>            <div class="ad-approval-panel-line">Data</div>          </div>        </div>        <div class="panel-popover-column panel-popover-column-2">          <div class="panel-popover-panel activity">            <div class="panel-popover-panel-title">Title 3</div>            <div class="detail-activity-scrollable">              <div class="detail-message-container">                  <div class="ad-approval-panel-line">Data</div>              </div>            </div>          </div>        </div>      </div>      <div class="panel-popover-footer">        <div class="panel-popover-footer-content">          <textarea class="detail-chat-input" placeholder="Send Message" data-emojiable="converted" style="display: none;" data-id="8ff80f0d-85e3-4ac4-acbf-c950fffbc1a4" data-type="original-input"></textarea>          <div class="emoji-wysiwyg-editor detail-chat-input parent-has-scroll" placeholder="Send Message" contenteditable="true"></div>          <div class="panel-popover-footer-button-bar">            <button class="detail-admin-control detail-approve" disabled="">Button 1</button>            <button class="detail-admin-control detail-disapprove">Button 2</button>            <div class="panel-popover-close-button">Close</div>          </div>        </div>      </div>    </div>  </body></html>

Prevent flex items from overflowing container

The primary problem is that your third (green) item is set to height: 100%. This means it will take the full height of the container.

Except you also have a margin set.

.item3 {
  background-color: green;
  min-width: 100px; 
  max-width: 200px;
  height: 100%; 
  margin-bottom: 20px;
  overflow: hidden;
}

You also have an h2 taking up height.

So, height: 100% + margin-bottom: 20px + h2 is greater than 100% and causes an overflow.

Try this instead:

.item3 {
  background-color: green;
  min-width: 100px; 
  max-width: 200px;
  height: calc(100% - 40px); 
  margin-bottom: 20px;
  overflow: hidden;
}

That will solve the main problem.

Then, to get the scrollbar to work properly, adjust your overflow rules and add display: flex to .item3. This triggers full height on the child element which is enough to render a scrollbar.

#main {  background-color: purple;  overflow: hidden;  top: 0;  position: absolute;  bottom: 0;  right: 0;  left: 0;}
.container {  margin-top: 10px;  float: left;  padding: 0;  margin: 0;  display: flex;  flex-flow: row wrap;  justify-content: center;  height: 100%;  align-items: flex-start;  /* overflow: scroll; */}
.item1 {  background-color: red;  margin-right: 20px;  width: 100px;  height: 100px;}
.item2 {  background-color: blue;  width: 100px;  height: auto;  margin-right: 20px;  color: white;}
.item3 {  background-color: green;  min-width: 100px;  max-width: 200px;  height: calc(100% - 40px);  margin-bottom: 20px;  overflow: hidden;  display: flex;}
.content {  min-height: 0;  overflow-y: scroll;}
h2 { height: 20px; margin: 0; }

<div id="main">  <h2>Hey</h2>  <div class="container">    <div class="item1"></div>    <div class="item2">Item item item item item item item item</div>    <div class="item3">      <div class="content">        <p>This is a paragraph1.</p>        <p>This is a paragraph2.</p>        <p>This is a paragraph3.</p>        <p>This is a paragraph4.</p>        <p>This is a paragraph5.</p>        <p>This is a paragraph6.</p>        <p>This is a paragraph7.</p>        <p>This is a paragraph8.</p>        <p>This is a paragraph9.</p>        <p>This is a paragraph10.</p>        <p>This is a paragraph11.</p>        <p>This is a paragraph12.</p>        <p>This is a paragraph13.</p>        <p>This is a paragraph14.</p>        <p>This is a paragraph15.</p>        <p>This is a paragraph16.</p>        <p>This is a paragraph17.</p>        <p>This is a paragraph18.</p>        <p>This is a paragraph19.</p>        <p>This is a paragraph20.</p>        <p>This is a paragraph21.</p>        <p>This is a paragraph22.</p>        <p>This is a paragraph23.</p>        <p>This is a paragraph24.</p>        <p>This is a paragraph25.</p>        <p>This is a paragraph26.</p>        <p>This is a paragraph27.</p>        <p>This is a paragraph28.</p>        <p>This is a paragraph29.</p>        <p>This is a paragraph30.</p>        <p>This is a paragraph31.</p>        <p>This is a paragraph32.</p>        <p>This is a paragraph33.</p>        <p>This is a paragraph34.</p>      </div>    </div>  </div></div>

Prevent flex item from exceeding parent height and make scroll bar work

Short Answer

Instead of flex: 1, use flex: 1 1 1px.

Make these two adjustments in your code:

#messagelist {
        /* flex:1; */
        flex: 1 1 1px; /* new */
    }

#messagecontents {
        /* flex:1; */
        flex: 1 1 1px; /* new */
    }

revised codepen

Explanation

In most cases, as you have noted, adding min-height: 0 to flex items in a column-direction container is enough to correct the problem.

In this case, however, there's an additional obstacle: flex-basis.

You're applying the following rule to flex items #messagelist and #messagecontents: flex: 1.

This is a shorthand rule that breaks down to:

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

(source: https://www.w3.org/TR/css-flexbox-1/#flex-common)

2019 UPDATE: Since the posting of this answer in 2018, it appears that Chrome's behavior has changed and is now uniform with Firefox and Edge. Please keep that in mind as you read the rest of this answer.

In Chrome, flex-basis: 0 is enough to trigger an overflow, which generates the scrollbars. (2019 update: This may no longer be the case.)

In Firefox and Edge, however, a zero flex-basis is insufficient. This is probably the more correct behavior in terms of standards compliance as MDN states:

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

Well, flex-basis: 0 meets none of those conditions, so an overflow condition should not occur. Chrome has probably engaged in an intervention (as they often do).

An intervention is when a user agent decides to deviate slightly from a standardized behavior in order to provide a greatly enhanced user experience.

To meet the "standardized behavior", which would enable an overflow to occur in Firefox and Edge, give flex-basis a fixed height (even if it's just 1px).

Prevent Flex Items from Overflowing a Container