Html Can’；t拉伸两个元素，使它们填满整个页面宽度

我正在努力使两个元素填充整个页面宽度，无论设备大小如何。Nav1和Nav2在nav容器中彼此相邻，并且将包含内容，这就是为什么我需要将它们分开

我想，如果我将每个.nav的宽度设置为50%，它可以在任何设备上工作并填充整个宽度，但它不能

.nav容器{
位置：绝对位置；
显示器：flex；
浮动：对；
}
.nav1 p{
显示：内联；
}
导航{
背景：rgb（255、255、255）；
}
.导航1{
宽度：50%；
高度：300px；
}
.导航2{
宽度：50%高度：300px；
}

菜单

您需要在容器上设置100%宽度，并在

nav

元素上设置

flex grow:1

，以使它们平等地占用可用空间

正文{
保证金：0；
}
.导航集装箱{
位置：绝对位置；
宽度：100%；
显示器：flex；
}
.菜单{
保证金：0；
}
导航{
背景：#f8f8；
柔性生长：1；
高度：300px；
}
.导航2{
背景：#eee；
}

菜单1


菜单2