Padding and flexbox

HTML-CSS
1

When I try putting the padding property of a child element put inside a parent which is also a child but this time its parent is a flexbox, when I try putting the padding in percentages, it doesn’t make the parent accommodate the increase in the size and so pushes the content outside the parent. Why is that?

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="assign6">
    <nav>
      <ul class="links">
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Contact</li>
      </ul>
    </nav></div>  
</body> 
</html>

:root {
  --backgroundColor: #ddd;
}
.assign6 nav {
  background-color: var(--backgroundColor);
  width: 85%;
  padding: 1%;
  display: flex;
  justify-content: flex-end;
}

.assign6 nav ul {
  display: flex;
  padding-left: 0px;
  margin: 0px;
justify-content: flex-end;background: blue;/* width: 50%; */color: white;}

.assign6 nav ul li{
  list-style: none;
  padding: 0px 6%;
}
2

Try indenting this code properly.

Is this what you expect?

Screenshot 2022-05-14 at 5.33.33 PM
Screenshot 2022-05-14 at 5.33.33 PM864×402 3.35 KB

3

I was asking about the behavior. Elements inside a flexbox assume certain width according to their contents. So if we put an element (let’s call this the “child”) inside an element (and let’s call this the “parent”) put in a flexbox (we’ll just refer to this as the “flexbox”) and give the child a padding in pixels ,then the parent will be upsized according to the increase in the content of the child element. But surprisingly this is not the case when we use padding in percentages (we see the parent width stays the same and the child is pushed of the parent, it is like the padding is put on the inside of the parent element like we have used the rule- box-sizing: border-box and determine the width of the parent, but we didn’t). Why is this the case???

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.