Margins on flexbox items work in Chrome but nothing else <p>I have a flexbox with flex-direction column. The items inside the flexbox have margins set but the margins only appear in chrome. I tried setting a height to the container larger than the items and setting <code>justify-content: space-around</code> but that had no effect either.</p> <p>I have looked around but can't seem to find any mention of this being a bug or browser support issue. </p> <p>Here is the code I have. and here is a <a href="https://jsfiddle.net/GJordan/02tpL38g/6/" rel="nofollow">fiddle</a> demonstrating the behavior. If you view the fiddle in Chrome you see the margins but in firefox no margins.</p> <p><strong>SCSS</strong></p> <pre><code>.background { background-color: red; } .backgroundText { display: flex; flex-direction: column; a { padding-left: 3%; margin-top: 15%; font-size: 75px; &amp;:nth-child(4) { margin-bottom: 15%; } } } </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;div class=container-fluid&gt; &lt;div class="background col-xs-12"&gt; &lt;div class="col-xs-3 col-xs-offset-9"&gt; &lt;div class="backgroundText"&gt; &lt;a href="#"&gt;Item&lt;/a&gt; &lt;a href="#"&gt;Item&lt;/a&gt; &lt;a href="#"&gt;Item&lt;/a&gt; &lt;a href="#"&gt;Item&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>