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

You could use overflow: auto on child element. In case you want to hide overflow only on largest item then you could use flex: 1 on that item.

.container {
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  height: 210px;
  width: 200px;
}
.child {
  display: flex;
  width: 100px;
  overflow: auto;
}
.first {
  background-color: rgba(255, 0, 0, 0.2);
}
.second {
  background-color: rgba(0, 255, 0, 0.2);
  flex: 1;
}
.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