将“Position：fixed”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; 
} 

现在将节上的内容包装到一个inner的div定位absolute这样的：

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>

检查了这一点，让我知道您的反馈意见。谢谢！