Установите ту же ширину div «Position: fixed», что и родительский div (элемент flexbox)
Как I сделать такую же ширину 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>