CODEWITHSUNDEEP
cssflexboxsidebar
Simonski
Simonski

Reputation: 121

CSS flexbox variable widths in same item (Shopify)

Image of what I had, what it looks now and what I want

Is there a way in CSS flexbox to expand an item (my prduct grid=brown) to full width after another item (my sidebar=grey) is finished? On the left side of the picture is what it looked like, before I implemented flex wrap, middle is what I have now with wrap, and right is what I want. Sometimes my sidebar is high, depending on the amount of filters that can be set. It would be nice to already see products next to the sidebar, but with full width after the sidebar is finished. My CSS code so far:

.flex-layout {
    display: flex;
    min-height: calc(100vh - 60px);
    flex-wrap: wrap;
}
.flex-col1 {
    width: 200px;
    padding-left: 30px;
    display: inline-block;
}
.flex-col2 {
    flex: 2;
    flex-basis: 300px;
}
.col {
    display: inline-block;
    vertical-align: top;
}

My shopify liquid template:

<div class="grid-uniform grid-link__container">
    <div class="flex-layout">
        <div class="col flex-col1">
                {% include 'collection-sidebar', sidebar-run-check %}
        </div>
        <div class="col flex-col2">
...

Upvotes: 0

Views: 1184

Answers (1)

Sapinder Singh
Sapinder Singh

Reputation: 351

You could use grid here to define individual areas for items.

Or

Another simple approach is to keep the first flex-item and remove the second one, and then use as the background for the flex container.

You could keep the width property of first item if you want. Or set the width of flex-container to 100vw and, set flex-basis: 50% and flex-grow: 0 to the first flex-item to make it half the width of the container.

Upvotes: 0

Related Questions