Geek Answers Handbook

Priority horizontal scrolling in the direction of flexibility of the column with the wrapper

In this example, I use flex-direction:row

http://jsfiddle.net/9a1d2ddz/

If the space is not suitable for elements, a vertical scroll bar appears

I want to achieve the same, but with the ordering of the boxes "top to bottom"

http://jsfiddle.net/ebd8rsnx/

but instead of getting the horizontal scrollbar, I want to keep the vertical

basically the same thing from the above, but with ordering from top to bottom and not from left to right

I thought this was what I can do with max-height: min-content, but it seems to have no effect.

early

div
{
    overflow:auto;
    border:2px blue solid;
    box-sizing:border-box;
    flex-direction:column; /* try column|row */
    display:flex;
    flex-wrap:wrap;
}

span
{
    min-width:150px;
    min-height:150px;
    flex:1 1 auto;
    border:1px red solid;
    display:block;
    overflow:hidden;
    box-sizing:border-box;
}
+4
source share
2 answers

, . , , .
, . , . , , , , css. , js, Columnizer Masonry. , . , , . , , /, , . - , , , , , , , .

0

CSS3 "column" : http://caniuse.com/#feat=multicolumn

, . div, , div .

.columns-container {
    max-height: 50vh;
    overflow-y:auto;
}
.columns {
    -webkit-column-width: 15em;
    -moz-column-width: 15em;
    column-width: 15em;
    /*optional column-count*/
    /*
    -webkit-column-count:4;
    -moz-column-count: 4;
    column-count: 4;
    */
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
}

<div class="columns-container">
    <div class="columns">
        <div>Lorem ipsum dolor sit amet. Sample text 1</div>
        <div>Lorem ipsum dolor sit amet. Sample text 2</div>
        ...
        <div>Lorem ipsum dolor sit amet. Sample text 1000</div>
    </div>
</div>
0

More articles:


All Articles