无法拉伸两个元素以使它们占据页面的整个宽度

Question

无论设备的尺寸如何，我都在努力使两个元素占据页面的整个宽度。 Nav1和Nav2在nav-container中彼此相邻，并且其中包含内容，这就是为什么我需要将它们分开。

我以为如果将每个.nav＃的宽度都设置为50％，它将可以工作并在任何设备上填满整个宽度，但不会。

.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;
}

<div class="nav-container">
  <nav class="nav1">
    <p class=""></p>
  </nav>
  <nav class="nav2">
    <p class="menu">
      Menu
    </p>
  </nav>
</div>

试图像在此网站上创建导航栏https://www.ouiwill.com

Answer 1

您需要在容器上设置100％的宽度，并在flex-grow: 1元素上设置nav，以使它们平均占用可用空间

body {
  margin: 0;
}

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

.nav1 p {
  display: inline;
}
.nav2 p {
  margin: 0;
}

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

.nav1 {
  height: 300px;
}

.nav2 {
  height: 300px;
  background: #eee;
}

<div class="nav-container">
  <nav class="nav1">
     <p class="">Menu 1</p>
   </nav>
   <nav class="nav2">
     <p class="menu">
       Menu 2
     </p>
  </nav>
</div>