Databases
StackOverflow2013
Postsdbo
POFlexible box layout model: How should auto margins in the cross-axis direction behave?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFlexible box layout model: How should auto margins in the cross-axis direction behave?
    text
    copied!<p>Please help me to understand one issue with the flexible box layout model for which I get different results in Firefox and Chrome.</p> <p>Consider the following HTML fragment:</p> <pre><code>&lt;body&gt; &lt;header&gt;Header&lt;/header&gt; &lt;footer&gt;Footer&lt;/footer&gt; &lt;/body&gt; </code></pre> <p>styled via</p> <pre><code>body { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } header { max-width: 400px; height: 20px; background-color: yellow; margin: 0 auto; } footer { width: 400px; height: 20px; background-color: green; margin: 0 auto; } </code></pre> <p>The header box has a maximum width constraint of 400px while the footer has a fixed width of 400px. When I try this code in Gecko-based browsers (Firefox 21 and 24 in my case) both header and footer are horizontally centered (as I hoped for by giving them left and right auto margins) but only the footer has a width of 400px while the header's width is just the width of the content even if enough horizontal space was available.</p> <p>In WebKit/Blink-based browsers (Chrome 25 and 28 in my case) the header and footers are both centered and are both 400px wide (in case there is enough horizontal space), and this is exactly what I want to achieve.</p> <p>Obviously, either Firefox or Chrome must be wrong. How do you understand the spec: <a href="http://www.w3.org/TR/css3-flexbox/" rel="nofollow">http://www.w3.org/TR/css3-flexbox/</a>? What is the desired behaviour?</p> <p>If you want to play around, here is a JSFiddle: <a href="http://jsfiddle.net/4Rv7K/" rel="nofollow">http://jsfiddle.net/4Rv7K/</a>.</p> <p>Note that one has to enable the flexible box layout model in the release version of Firefox. It is the setting layout.css.flexbox.enabled. (Without it, one is actually not testing anything about flexboxes.)</p> <p>P.S.: The bug was in Chromium's engine and has apparently been fixed by now: <a href="https://code.google.com/p/chromium/issues/detail?id=242654" rel="nofollow">https://code.google.com/p/chromium/issues/detail?id=242654</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload