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

flex has Three values: flex-grow | flex-shrink | flex-basis;

you should apply particular max-height for first child.

.first {
  background-color: rgba(255, 0, 0, 0.2);
  flex: 0 1 1;
  max-height:70px;
}

otherwise if first div height increases it will dominate on other divs.

.container {
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  height: 210px;
  width: 200px;
}
.child {
  width: 100px;
  overflow:hidden;

}
.first {
  background-color: rgba(255, 0, 0, 0.2);
  flex: 0 1 auto;
}
.second {
  background-color: rgba(0, 255, 0, 0.2);
  flex: 0 1 1;
}
.third {
  background-color: rgba(0, 0, 255, 0.2);
 flex: 0 1 1;
}

  
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