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

问题

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 without Flex. Is there any pure CSS way to do that?

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>

回答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!

来源：https://stackoverflow.com/questions/39586406/set-the-same-width-of-a-position-fixed-div-as-parent-divflexbox-item

标签

html

css

css3

flexbox