Alignment: 03-flex-header-2 solution is missing a flex-grow: 1

[nas-proj]

Checks

• This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• I have thoroughly read and understand The Odin Project Contributing Guide
• Would you like to work on this issue?

Describe your suggestion

The solution in the style.css file of exercise 03-flex-header-2 from Foundations-Alignment is missing "flex-grow: 1;" in .left container. In the desired outcome image / gif of the the assignment you can see that the right side container is pushed all the way to the right. The space between the left and right side grows based on the size of the browser. The provided solution does not result in the desired outcome of the image/gif. The solution needs to include "flex-grow: 1;"

Path

Foundations

Lesson Url

https://www.theodinproject.com/lessons/foundations-alignment

(Optional) Discord Name

No response

(Optional) Additional Comments

No response

[pranjalarora98]

@nas-proj I would like to work on it actively Can you please assign the issue to me?

[nas-proj]

@pranjalarora98 I am a new student to the odin project and submitted this issue while executing the curriculum. I think issues can only be assigned by maintainers, I don't have that permission nor do I know who the maintainers are.

[JoshDevHub]

This is an issue with the CSS exercises repo, so I've transferred here away from the curriculum. A maintainer more involved with @TheOdinProject/html-css will give it a closer look soon.

[mao-sz]

@nas-proj the current solution CSS is correct. .left does not require flex-grow because the container .header has justify-content: space-between. That spaces the children evenly from the very start to the very end, hence the two children stick to the outside as the viewport width changes. The .left element isn't growing or shrinking in size at all.