Within this flex element, I have set flex: column wrap;
and max-height: 150px;
. The issue I'm facing is that justify-content
doesn't seem to be working. However, when I switch to using height: 150px
, the alignment works fine. This problem arises specifically when the container has max-width: 100%;
& flex-direction: row;
.
.container {
max-height: 150px;
display: flex;
flex-flow: column wrap;
justify-content: center;
}
.item {
width: 25%;
height: 50px;
border: 1px solid #000;
box-sizing: border-box;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>