How to force flex children not to overflow the container?

Question

Given a flexbox container, how could I make sure that, if children have lots of content, they don\'t overflow the container?

Answer 1

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

  
first first first first first first first
  
second second second second second second second second second second second second second second second second second second second
  
third

The children get height distributed among them proportionally to their content height. Overflowing content is hidden.