不能拉伸两个元素使它们填满页面的整个宽度

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% 宽度并在 nav 元素上设置 flex-grow: 1 以使它们在 space 上均等

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>

不能拉伸两个元素使它们填满页面的整个宽度

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

html

css

width