how do you wrap overflowing content in a single row using flexbox?

Question

You should wrap all children into other tag to display full content without overflow

.container {
  display: flex;
  width: 500px;
  height: 200px;
  overflow: auto;
}
.flex-box {
  display: flex;
  justify-content: center;
  background-color: gray;
  flex: 1;
}

.child {
  margin: 5px;
  min-width: 100px;
  height: 150px;
  background-color: darkgray;
}

<div class="container">
  <div class="flex-box">
    <div class="child"> </div>
    <div class="child"> </div>
    <div class="child"> </div>
    <div class="child"> </div>
    <div class="child"> </div>
    <div class="child"> </div>
  </div>
</div>

Leave a Comment Cancel Reply