Flex wrap column: fill the available width with columns

Question

I have items of different sizes in the flex container which I want to display in several columns of different widths, depending on the content. flex-flow: column wrap works good for me with fixed container height but I have fixed width for container and want the height depending on the content. I.e. I want as many columns as fit in width. Example, how it must look:

.container {
        height: 80px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-flow: column wrap;
        align-content: left;
    }
    .container > span {
        margin: 3px 12px;
        background: #ebd2b5
    }

<div class="container">
    <span>Apple</span>
    <span>Apricot</span>
    <span>Avocado</span>
    <span>Banana</span>
    <span>Bilberry</span>
    <span>Blackberry</span>
    <span>Blackcurrant</span>
    <span>Blueberry</span>
    <span>Boysenberry</span>
    <span>Currant</span>
    <span>Cherry</span>
    <span>Cherimoya</span>
    <span>Cloudberry</span>
    <span>Coconut</span>
</div>

Any solutions with CSS?

Answer 1

No. With pure css you can't.

However if you use align-content: stretch; You can distribute the current columns to the entire container width.

.container {
        height: 80px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-flow: column wrap;
        align-content: stretch;
    }
    .container > span {
        margin: 3px 12px;
        background: #ebd2b5
    }

<div class="container">
    <span>Apple</span>
    <span>Apricot</span>
    <span>Avocado</span>
    <span>Banana</span>
    <span>Bilberry</span>
    <span>Blackberry</span>
    <span>Blackcurrant</span>
    <span>Blueberry</span>
    <span>Boysenberry</span>
    <span>Currant</span>
    <span>Cherry</span>
    <span>Cherimoya</span>
    <span>Cloudberry</span>
    <span>Coconut</span>
</div>