Can’t stretch two elements to make them fill the whole width of the page

Question

I am struggling with making two elements fill the whole width of the page no matter the size of the device. Nav1 and Nav2 stand next to each other in nav-container and will have content in it, that's why I need them to be separate.

I thought if I set width to 50% for each .nav# it will work and fill the full width on any device, but it doesn't.

.nav-container {
  position: absolute;
  display: flex;
  float: right;
}

.nav1 p {
  display: inline;
}

nav {
  background: rgb(255, 255, 255);
}

.nav1 {
  width: 50%;
  height: 300px;
}

.nav2 {
  width: 50% height: 300px;
}

Trying to make a navigation bar like on this website https://www.ouiwill.com

user_6094348 · Answer

You need to set 100% width on container and set flex-grow: 1 on nav elements to make them take available space equally

body {
  margin: 0;
}

.nav-container {
  position: absolute;
  width: 100%;
  display: flex;
  
}

.menu {
  margin: 0;
}

nav {
  background: #f8f8f8;
  flex-grow: 1;
  height: 300px;
}

.nav2 {
  background: #eee;
}

Can’t stretch two elements to make them fill the whole width of the page

1 Answers