0

What CSS properties should I set so that the columns will wrap with pre-determined column breaks and ordering?

The columns will contain items of dynamic and varying height (so their height can't be specified in the CSS).

Desired responsive layout at various widths

Desired layout for wrapping to fit 1 column across. Desired layout for wrapping to fit 2 columns across. Desired layout for wrapping to fit 3 columns across.

Unsuccessful attempt

(I earlier attempted to do this with Grid layout, but that doesn't work because I don't have rigid row heights.)

I'm now attempting to do this with display: flex, but it doesn't behave how I want in most browsers. An example:

header {
    height: 2.0rem;
    background: PeachPuff;
}
footer {
    height: 2.0rem;
    background: PaleGreen;
}

header,
footer,
section.app-column {
    padding: 1.0rem;
}
section.app-column {
    display: inline-block;
    flex: none;
    page-break-inside: avoid;
    break-inside: avoid;
    width: 150px;
    margin-right: 0.5rem;
}

section#main section#app-column-primary {
    background: Cyan;
}
section#main section#app-column-secondary {
    background: Thistle;
}
section#main section#app-column-tertiary {
    background: Coral;
}

section#main {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

@media (max-width: 199px) {
    section#main {
        content: "<p>This application requires a wider graphical display.</p>";
    }
    section.app-column {
        display: none;
    }
}

@media (min-width: 200px) and (max-width: 399px) {
    section#app-column-primary { order: 1; }
    section#app-column-secondary { order: 2; }
    section#app-column-tertiary { order: 3; }
    section.app-column {
        page-break-before: avoid;
        break-before: avoid-column;
    }
}

@media (min-width: 400px) and (max-width: 599px) {
    section#app-column-primary { order: 1; }
    section#app-column-secondary { order: 3; }
    section#app-column-tertiary { order: 2; }
    section.app-column {
        page-break-before: always;
        break-before: column;
    }
    section#app-column-tertiary {
        page-break-before: avoid;
        break-before: avoid-column;
    }
}

@media (min-width: 600px) {
    section#app-column-primary { order: 1; }
    section#app-column-secondary { order: 2; }
    section#app-column-tertiary { order: 3; }
    section.app-column {
        page-break-before: always;
        break-before: column;
    }
}
<header>Header ipsum, dolor sit amet.</header>
<section id="main">
    <section class="app-column" id="app-column-primary">
        Primary column
        <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </section>
    <section class="app-column" id="app-column-secondary">
        Secondary column
        <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Curabitur ac ornare justo. Sed vitae rhoncus nibh. Phasellus
        venenatis, quam eu rutrum porta, velit dolor fermentum elit, eu
        faucibus sapien ipsum in leo.
    </section>
    <section class="app-column" id="app-column-tertiary">
        Tertiary column
        <br />Lorem ipsum dolor sit amet.
    </section>
</section>
<footer>Footer ipsum, dolor sit amet.</footer>

Correct result in Firefox

Firefox correctly interprets the requested break-before properties. For example, at 2 columns across:

Correct wrapping in Firefox at 2 columns across.

Webkit and Chrome fail to break columns

But Chrome (and Webkit browsers) incorrectly refuse to insert a column break:

Wrapping in Chrome at 2 columns across. Wrapping in Webkit at 2 columns across.

Note that CanIUse tells me that page-break-before should give the behaviour I'm wanting. Yet this example still fails, with page-break-before in the right places.

How can I get the correct result in all browsers that support Flexbox?

bignose
  • 30,281
  • 14
  • 77
  • 110
  • For Webkit a **known** height is required to force wrapping in a flex-column. That would be why the break probably isn't happening. I can't recall if this is a bug or a user agent difference to FF. - https://stackoverflow.com/questions/27119691/how-to-start-a-new-column-in-flex-column-wrap-layout – Paulie_D Dec 12 '18 at 22:28
  • https://caniuse.com/#search=break-before – Paulie_D Dec 12 '18 at 22:31
  • @Paulie_D, thanks for the response. When I add a `height` property to the items, the layout in Chrome and Webkit still doesn't have breaks where requested. Can you come up with an example that does work, and post it in an answer? – bignose Dec 12 '18 at 23:28
  • Also worth noting that adding `height` would not be feasible in the actual style sheet I'm writing, so I need a solution that works without that. – bignose Dec 12 '18 at 23:29
  • As noted in the 1st link, it just looks like FF is the only browser supporting the property you are trying to use. – Paulie_D Dec 13 '18 at 09:49

0 Answers0