I have 5 columns of divs in a flexbox. The issue is, as the screen gets smaller, the flexbox starts to go outside of the white container. What if I want all the columns to continue to get smaller? Why does the flexbox decide at a certain point to start moving outside the outer container, rather than continue to get smaller? How do I change that so they keep getting smaller?
.container {
display: block;
background-color: #fff;
padding-left: 30px;
padding-right: 30px;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
margin-left: -30px;
margin-right: -30px;
padding: 15px 0 60px;
}
.cat {
border: 1px solid black;
padding-left: 30px;
padding-right: 30px;
}<div class="container">
<div class="row">
<div class="cat">
Hello
</div>
<div class="cat">
This is a group of flex columns
</div>
<div class="cat">
Isn't that interesting?
</div>
<div class="cat">
This is a group of flex columns
</div>
<div class="cat">
Isn't that interesting?
</div>
</div>
</div>