1

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

img

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;    
}
1
  • 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: stackoverflow.com/questions/15662578/…). No 2009 Flexbox implementation in any browser supports wrapping, and Firefox currently does not support wrapping with their modern implementation either (see: 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, 2013 at 20:19

1 Answer 1

0

Remove the max-width you have set on them.

Updated jsFiddle - I removed the left/right margins.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.