display flex flex wrap width issue

Question

I have a parent element It has 5 children (it could be any amount cause it is dynamic, but this is the current case)

<div class="parent">
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
</div>

The parent element has the following css applied to it

.parent {
    height: 48px;
    line-height: 24px;
    flex-wrap: wrap;
    flex-flow: column;
    display: flex;

}

The child has these styles

.child {
    width: 116px;
    align-items: center;
}

The issue is that the parent only has the width of one child (116px) even though it has three columns each being 116px wide.

Any help is appreciated.

Thanks

Hey Shmili, just to clarify - what exactly are you trying to accomplish? — spøjst, Nov 21 '19 at 03:13
I want to have a parent wrapper that contains children but it should only be a specific height (48px) so it wraps after the 2nd row. — Shmili Breuer, Nov 21 '19 at 03:38
So, you want the parent wrapper to contain how many children before wrapping to to the second row? — spøjst, Nov 21 '19 at 03:44

score 0 · Answer 1 · answered Nov 21 '19 at 03:28

Put the flex-wrap: wrap below the flex-flow:column, this will solve the issue. Or just simply remove the flex-flow:column because it will conflict to the flex-wrap: wrap.

Please see below:

.parent {
    height: 48px;
    line-height: 24px;
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
}

.child {
    width: 116px;
    align-items: center;
  border: 1px solid;
}

<!-- flex-wrap below flex-column -->

<div class="parent">
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
</div>

.parent {
    height: 48px;
    line-height: 24px;
    display: flex;
    flex-wrap: wrap;
}

.child {
    width: 116px;
    align-items: center;
  border: 1px solid;
}

<!-- no flex-column -->

<div class="parent">
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
</div>

display flex flex wrap width issue

1 Answers1