Why, when for an element that is inside a flex-element, you put the margin in%, the flex-element itself does not expand, and if you put the margin in px, then the flex-element expands.

    1 answer 1

    The percentage value is calculated relative to the width of the parent element.

    Consider the example of inline-flex :

    Initially, the .div--0 container has a width defined by the content. Then from this Width the margin calculated which is added .div--1 , while the width of the parent is not changed, since There is a binding to it.

    In cases of .div--2 pixel value is not bound to the parent, which allows the parent container to be expanded.

     .wapper { display: inline-flex; border: 1px solid red; padding: 10px; margin-top:10px; } .div--1 { margin-left: 50%; } .div--2 { margin-left: 50px; } 
     <div class='wapper'> <div class='div--0'> 1234 5678 90 </div> </div> <br/> <div class='wapper'> <div class='div--1'> 1234 5678 90 </div> </div> <br/> <div class='wapper'> <div class='div--2'> 1234 5678 90 </div> </div>

    • People with display-flex have the same behavior. I didn’t mean it at all .. - Sergey Razumov