Why Is a Flex Item Limited to Parent Size

Why is a flex item limited to parent size?

You need to consider flex-shrink. As you can read here:

The flex-shrink CSS property specifies the flex shrink factor of a
flex item. Flex items will shrink to fill the container according to
the flex-shrink number, when the default size of flex items is larger
than the flex container.

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}

.parent {
  min-height: 100vh;
  width: 50vw;
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  border: 1px solid blue;
  width: 150%;
  flex-shrink: 0; /* added this */
}

<div class="parent">
  <div class="child">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet tellus cras adipiscing enim eu turpis. Neque aliquam vestibulum morbi blandit. Sem integer vitae justo eget magna.
  </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).

Width of div is wrong (flex)

Add flex-shrink: 0; to the element that shouldn't become smaller:

.parent {
  display: flex;
  width: 100%;
  background: rgba(0,0,0,.2);
}

<div class="parent">  
  <div style="width:70px; background: green; height: 50px; flex-shrink: 0;"></div>
  <div style="width: 100%; background: rgba(0,0,0,.4)">a</div>
</div>

Why my third element is not outside of its parent?

defaut flex-shrink value is set to 1 , to resize children to fit inside the container on the direction axis set.

If flex-wrap is set to wrap, it won't try to fit the element on single line (or column) but will send element to the next line (or column) .

you need to reset flex-shrink value to 0.

example

* {
  box-sizing: border-box;
}

.parent {
  background-color: #001f3f;
  display: flex;
  padding: 20px;
  
  gap: 20px;/* added to follow your padding idea ? */
  overflow: auto;/* or hidden ? */
}

.child {
  background-color: #0074d9;
  padding: 20px;
  color: white;
  flex-basis: 50%;
  border: 3px solid #4CAF50;
  
  /*added*/
  flex-shrink: 0;
  flex-basis: calc(50% - 10px);/* mind that padding idea ? */
}

<div class="parent">
  <div class="child one">child</div>
  <div class="child two">This is some longer content sdsds ds dssdsdsd sds dsdsdsdsdsd sd sd sds sdsdsdsds sdsdsd sd sd sd sd sdsdsdsdsds sdsdsdsd sds dsdsdsds sdsdsdsdsdsdsd</div>
  <div class="child three">child</div>
</div>

Width css property is not apply in items inside flex parent

you have to use flex-shrink: 0 in button CSS.

.container {
  display: flex;
  max-width: 300px;
  overflow-y: auto;
}

.container button {
  width: 500px;
  flex-shrink: 0;
}

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 and white-space: nowrap; child won't respect width

You need to disable flex-shrink.

Add this to your code:

div.list div {
  flex-shrink: 0; /* new */
  white-space: normal;
  width: 50%;
  outline: 1px solid white;
  background: #eee;
}

A flex default setting is flex-shrink: 1, which causes items to shrink so that they don't overflow the container. If you want items to keep their defined width / height, then disable that setting.

div.container {
  overflow: hidden;
  width: 480px;
  margin: 24px 0;
}

div.list {
  overflow: auto;
}

div.flex-list {
  display: flex;
  white-space: nowrap;
}

div.list div {
  flex-shrink: 0; /* new */
  white-space: normal;
  width: 50%;
  outline: 1px solid white;
  background: #eee;
}

<div class="container">
  <div class="list flex-list">
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.
    </div>
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías.
    </div>
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.
    </div>
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías.
    </div>
  </div>
</div>

Why are the children of a flexbox scaling down even though I've set a width for them?

Your items are shrinking because flexbox tries to fit all children into its width. You can change this behaviour by specifying flex-shrink: 0 on your column divs which tells flexbox that your items should not shrink beyond their defined width. You can also read more about flex-shrink at https://css-tricks.com/almanac/properties/f/flex-shrink/.

.row {
display: flex;
justify-content: space-between;
width: 100%;
height: 50px;
}
.row > div {
    flex-shrink: 0;
}
.column1 {
width: 200px;
background-color: red;
}
.column2 {
width: 150px;
background-color: blue;
}
.column3 {
width: 300px;
background-color: green;
}

<div class="row">
    <div class="column1"></div>
    <div class="column2"></div>
    <div class="column3"></div>
</div>

Why Is a Flex Item Limited to Parent Size