How to wrap boxes in section?

Question

A have a <section> and <article>s. I would like to move all <article> elements and resize to width 100%, when user resizes browser. I try to do it with flex-box. Here is what I want to achieve

JSFiddle here

section, article {
display: box;
}

article {
    background: red;
    margin: 10px;
    display:-moz-box; /* Firefox */
    display:-webkit-box; /* Safari and Chrome */
    display:-ms-flexbox; /* Internet Explorer 10 */
    display:box;
    max-width: 300px;
    min-width: 50px;
    padding: 20px;
    width: 100%;
    overflow: hidden;
}

section {
    display: -moz-box-flex;
    background: blue;    
}

You have quite a few things going on wrong here. `display: box` is from the old 2009 Flexbox draft, which is on its way out (see: http://stackoverflow.com/questions/15662578/flexible-box-model-display-flex-box-flexbox). No 2009 Flexbox implementation in any browser supports wrapping, and Firefox currently does not support wrapping with their modern implementation either (see: http://stackoverflow.com/questions/16773928/flexbox-and-wrap-property). Box-flex is not a display property. Your 2nd diagram can only be achieved with the *column* orientation, which requires using fixed heights. — cimmanon, Oct 15 '13 at 20:19

score 0 · Accepted Answer · answered Oct 15 '13 at 19:21

0

Remove the max-width you have set on them.

Updated jsFiddle - I removed the left/right margins.

answered Oct 15 '13 at 19:21

Josh Crozier

233,099
56
391
304

How to wrap boxes in section?

1 Answers1