Can I avoid this flexbox wrapper? - css

Question

I'm not really sure if I need a wrapper to delimit the max-width of the container.
The header has a 100% width, and the .wrapper delimits to a 1000px max width.
Is there any way to avoid using the .wrapper div?
body { margin: 0; }
header {
margin: 0;
padding: 0;
background-color: DarkRed;
}
.header-wrapper {
margin: auto;
max-width: 500px;
padding: 10px 0;
}
#logo, #tagline, #menu {
margin: auto;
padding: 5px;
}
#logo {
flex: 2;
background-color: Crimson;
}
#tagline {
flex: 5;
background-color: Salmon;
}
#menu {
flex: 3;
background-color: IndianRed;
}
#media (min-width: 768px){
.header-wrapper {
display: flex;
}
}
<header>
<div class="header-wrapper">
<div id="logo">Logo</div>
<div id="tagline">Tagline</div>
<div id="menu">Menu</div>
</div>
</header>
CodePen

Answer 1

This will depend on your exact needs, there's no fast rule about your exact html structure when it comes to designing a page.
If you want a background color that extends the entire 100% width but you want the content to have a hidden left/right barrier, you probably want a wrapper to force that barrier rule. otherwise, the red background will only be as wide as the 1000px rule (or whatever you set your centered bounds to)
if you don't need a barrier and want the content/nav items to span the entire width, then you don't need a wrapper.
again, it's really up to you depending on the overall design of the component

Answer 2

Set all div max-width, which is equal to 1000px

Answer 3

what you did looks like your wrapper will always be 500px according to mediaqueries, so width of each elements are static.
You can modify your mediaqueries and remove the extra wrapper and the flex values.
Snippet below behave just like your codepen ... with a wrapper less :
body {
margin: 0;
}
header {
margin: 0;
padding: 0;
background-color: DarkRed;
padding: 10px 0;
}
#logo,
#tagline,
#menu {
padding: 5px;
}
#logo {
background-color: Crimson;
}
#tagline {
background-color: Salmon;
}
#menu {
background-color: IndianRed;
}
#media (min-width: 768px) {
header {
display: flex;
justify-content: center;
}
#logo {
width: 100px;
}
#tagline {
width: 250px;
}
#menu {
width: 150px;
}
}
<header>
<div id="logo">Logo</div>
<div id="tagline">Tagline</div>
<div id="menu">Menu</div>
</header>
http://codepen.io/gc-nomade/pen/ENqPVp