Why Do Flex Items Wrap When Using Percentage Padding?

Why Does Flex Item Split When Percentage Padding is Applied?

Consider a scenario where a

element, a flex item, encompasses several non-flex
• elements. When percentage padding is applied to the
• elements, the
  container splits across multiple lines. However, this is not the case when fixed padding is used.

  Explanation

  When percentage padding is used, it is relative to the width of the containing block, in this case, the

  . The problem arises from the fact that percentage padding cannot be resolved before the width of the container is determined.

  Without fixed padding, the browser calculates the

  's width based on its content. Percentage padding is then applied, resulting in a wider container that no longer fits all the
  • elements on a single line.

    Beispiel

    To better illustrate this behavior, consider the following code:

    li {
      display: inline-block;
      padding: 0 5%; /* Percentage padding */
      border: 1px solid black;
    }
    
    header {
      display: flex;
    }
    
    ul {
      border:1px solid red;
    }

    If we execute the following JavaScript in the console, we can see the width of the

    after the padding has been applied:

    console.log(document.querySelector('ul').offsetWidth);

    This will output the width of the

    after percentage padding has been applied.

    The above is the detailed content of Why Do Flex Items Wrap When Using Percentage Padding?. For more information, please follow other related articles on the PHP Chinese website!