Установите ту же ширину «Позиция: фиксированный» 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 ДИВ, который позиционируется 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 оставаться на 100vh в nav-wrapper и дополнительная высота будет переполняться.

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>

Проверьте это и дайте мне знать ваше мнение. Благодаря!