Set the same width of a “Position: fixed” div as parent div(flexbox item)

Question

How can Ｉ make the same width of the NavWrapper as parent?

I want these links at a fixed position even the main section overflows.

I know how to do this with

Answer 1

You don't need fixed position- you can see why I say this after looking at the example below:

Remove the fixed positioning and add height: 100vh to nav:

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

Now wrap the contents on a section into an inner div that is positioned absolute like this:

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

This will allow the section to remain at 100vh of the nav-wrapper and the extra height will overflow.

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>

Check this out and let me know your feedback. Thanks!