將「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>

檢查了這一點，讓我知道您的反饋意見。謝謝！