将“位置：固定” div 的宽度设置为父 div（flexbox 项）

Question

如何让NavWrapper的宽度和父级一样？

即使主要部分溢出，我也希望这些链接位于固定位置。

我知道如何在没有 Flex 的情况下做到这一点。有没有纯 CSS 方法来做到这一点？

body {
  padding:0;
  margin:0
}
.wrapper {
  display: flex;
}
nav { 
  flex: 1 1 150px;
  background: gray;
}
.nav-wrapper {
  width: 100%;
  position: fixed;
  top: 0; left: 0;
  display:flex;
  flex-direction: column;
}

.nav-wrapper a {
  flex: 1 1;
  border: 1px solid red;
}
section {
  flex: 5 1 500px;
  padding: 20px;
}

<div class="wrapper">
  <nav role="navigation">
    <div class="nav-wrapper">
         <a href="#">Home</a> 
         <a href="#">About</a> 
    </div>
  </nav>
  <section>
    <p>Lorem</p>
  </section>
</div>

Answer 1

你不需要fixed 的位置——你看下面的例子就明白我为什么这么说了：

去掉fixed定位，将height: 100vh添加到nav：

nav {
  flex: 1 1 150px;
  background: gray;
  height: 100vh;
}

现在将一个部分的内容包装到一个位于absolute 的inner div 中，如下所示：

section {
  flex: 5 1 500px;
  padding: 20px;
  position: relative;
  overflow-y: auto;
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

这将允许section 保持在nav-wrapper 的100vh 并且额外的高度将溢出。

body {
  padding: 0;
  margin: 0
}
.wrapper {
  display: flex;
}
nav {
  flex: 1 1 150px;
  background: gray;
  height: 100vh;
}
.nav-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.nav-wrapper a {
  flex: 1 1;
  border: 1px solid red;
}
section {
  flex: 5 1 500px;
  padding: 20px;
  position: relative;
  overflow-y: auto;
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="wrapper">
  <nav role="navigation">
    <div class="nav-wrapper">
      <a href="#">Home</a> 
      <a href="#">About</a> 
    </div>
  </nav>
  <section>
    <div class="inner">
      <p>Lorem</p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
      asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.       
      <p>Lorem</p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
      asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.       
      <p>Lorem</p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
      asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.       
    </div>
  </section>
</div>

看看这个，让我知道你的反馈。谢谢！