Does flexbox display alter margin widths? - css

Question

My margins when using flexbox (current version or display: flex;) seem to be doubled and I can't figure out why. All the other margins between sections on the page show up as 10px as they have been set, but the ones for the flexbox content show up with around double that. I have already tried setting the wrapper div (#output) to margin: 0px; and padding: 0px; but that doesn't have any effect. Is this a flexbox 'feature'? Or is there something wrong with the margin/padding settings for my CSS?
The HTML:
<div id="all_content">
<section id='search_box'>
<h1>Auto Primer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<div id="output">
<nav id='user_input'>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</nav>
<section id='gene_selected'>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
<section id='primers'>
<h2>Primers</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id='how_to'>
<h2>How To Use Auto Primer</h2>
<p><span id="form_out"></span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
The CSS:
div#all_content {
width: 1200px;
margin: 0 auto;
padding: 0px;
}
section#search_box {
padding: 10px;
margin: 10px;
background: #ebf4fb;
border:2px solid #b7ddf2;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
div#output {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
}
nav#user_input {
background: #ebf4fb;
border: 2px solid #b7ddf2;
width: 275px;
padding: 10px;
margin: 10px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
section#gene_selected {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px;
margin: 10px;
background: #ebf4fb;
border: 2px solid #b7ddf2;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
section#primers {
padding: 10px;
margin: 10px;
background: #ebf4fb;
border: 2px solid #b7ddf2;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
section#how_to {
padding: 10px;
margin: 10px;
background: #ebf4fb;
border: 2px solid #b7ddf2;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
EDIT:
I managed to get the margins to look the same by giving the left flex element:
margin: 0px 5px 0px 10px;
and the right flex element:
margin: 0px 10px 0px 5px;
instead of margin: 10px; as all the other elements on the page use. While this works I'm still a little at a loss as to why flexbox does this.
EDIT:
Here's a jsfiddle demonstrating the problem: fiddle. Updated and simplified further.

Answer 1

The issue is that margins are applied twice on your side by side flex sections. You can fix this by simply distributing the margins properly between the side by side elements.
Based on CSS3 Definition:
http://www.w3.org/TR/css3-flexbox/#item-margins
The margins of adjacent flex items do not collapse. Auto margins absorb extra space in the corresponding dimension and can be used for alignment and to push adjacent flex items apart; see Aligning with ‘auto’ margins.
This is what happens in your case, that the margins on your side by side flex items do not collapse, but on your other flex items, they do collapse so the margins are not applied twice on those flex items.