Why doesn't flex-grow work in this case?

HTML-CSS
1

Hello,

I have any issue with flexbox, regarding the flex-grow property.
So, I have a navbar and I would like that the first flexbox item would grow twice the size of the other children elements. Now, it doesn’t seem to work with flex-grow.

nav > header {
  margin: auto auto;
  padding: 0px 0px 0px 0px;
  background-color: red;
  flex-grow: 2;
}

Codepen

2

Do you just want the header to take up the full width of the nav container?

You have left/right padding on the nav you have also centered the content align-items: center.

You might create a container for the paragraph elements (which really should just be links, set to display: block instead) and move the left/right padding from the nav to that container.

You can also just overflow the padding on the nav, although that isn’t really the best way of doing it. But here is an example anyway.

#navbar > header {
  padding: 35px 0px 35px 0px;
  background-color: wheat;
  /* 100% width + container padding */
  width: calc(100% + 90px);
  text-align: center;
}
3

Thanks for pointing that out. Why wasn’t obvious. I’m not seeing the woods because of the tree. Ok, got your solution, tomorrow applying it. Thanks again.

4

slightly off topic, instead of using header tag, it might be more appropriate to use a heading one(h1, h2…). Header in html, is more to represent the top element of your page, which can contain various stuff, like logo, title(not to be confused with <title>), and even your navigation bar.
Imo, a more correct hierarchy of your tags would be:

<header>
  <h1>Heading</h1>
  <nav>
    <a>link A</a>
    <a>link B</a>
    <a>link C</a>
  </nav>
</header>

You could even use a list (<ul> for example) to put your navigation links, altho it makes it slightly more complicated to navigate in the CSS rules and will also require additional styling

5

Yeah, i had a similar thought, but going through all of previous challenges and refactor somehow the whole html code.

They’re far not the best work.

6

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