A
Geek Answers Handbook

Flex-box ignores packaged child margins (field collapse)

Given the following HTML:

<div class="outer"> <div> <div class="inner">A</div> </div> </div> <div class="outer"> <div class="inner">B</div> </div>

and the following CSS (prefix free):

 .outer { display: box; box-orient: vertical; height: 100px; width: 100px; background: red; margin: 10px; } .inner { height: 50px; margin-top: 10px; background: green; }

A and b

Here is the CodePen .

A terminates at <div> , so margin is ignored.

Q: How can I achieve B behavior for A (margin) using the flexible frame model?

Note. Shell divs can go on several levels.

Targeting: Latest Chrome / Safari / iOS

Many thanks for your help!

Edit: Thanks @ JoséCabo I came up with this:

 .outer { display: flex; flex-direction: column; height: 100px; width: 100px; background: red; margin: 10px; } .inner { height: 50px; margin-top: 10px; background: green; }

Codepen

Chrome: Chrome

Safari: Safari

Unfortunately, this does not work in Safari, as @cimmanon mentioned, so I still need help.

+6
source share
2 answers

Finally, I came up with the right solution (for my specific problem).

 .outer { display: flex; flex-direction: column; height: 100px; width: 100px; background: red; margin: 10px; } .inner { height: 50px; margin-top: 10px; background: green; display: inline-block; width: 100%; }

Codepen

I use display: inline-block on .inner to turn off the edge spread and then compensate for the lost width with width: 100% .

All credit goes to cimmanon to point me in the right direction of stealing the field

+2
source

What you are looking at has nothing to do with Flexbox, but what is called edge breaking

 .outer div { border: 1px solid; }

Adding a border prevented margin collapse. Instead of relying on the fields, I would recommend placing the registration in the parent container:

 .outer { padding-top: 10px; }

Example:

 .wrapper { background: #eef; border: 1px solid darkgray; } .container { display: flex; flex-wrap: wrap; margin: -1em; } .item { flex-grow: 1; margin: 1em; border: 1px solid black; padding: 1em; min-width: 6em; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div class="wrapper"> <div class='container'> <div class='item'>item</div> <div class='item'>item</div> <div class='item'>item</div> <div class='item'>item</div> <div class='item'>item</div> <div class='item'>item</div> </div> </div> </body> </html>

Now, to cover all your prefixes, you need something like this:

 .outer { display: -moz-box; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100px; width: 100px; background: red; margin: 10px; }
+5
source

More articles:


All Articles