html - 无法拉伸(stretch)两个元素以使它们填满页面的整个宽度

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

.menu {
  margin: 0;
}

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

.nav2 {
  background: #eee;
}

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