1

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Dean Zhao
  • 99
  • 3
  • 13

1 Answers1

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!

kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • Hi kukkuz, thanks for you help. But there is a problem that when the windows size becomes small, there will be two scroll bar. http://codepen.io/anon/pen/XjjGgE – Dean Zhao Sep 20 '16 at 07:15
  • What I acctually want to do is to implement the layout like this site [Jianshu](http://www.jianshu.com) using flex. – Dean Zhao Sep 20 '16 at 07:18
  • two scroll bars because the nav is overflowing... remove it by specifying `overflow: auto` for the `nav`... – kukkuz Sep 20 '16 at 07:51
  • "Jianshu" has `overflow: hidden` for the nav I guess... so I guess your queries are answered? – kukkuz Sep 20 '16 at 08:04
  • I tried to add 'overflow:hidden' to the wrapper and it works.. But is there a way to remove the blank space at the right side of the scrollbar? – Dean Zhao Sep 20 '16 at 08:50
  • that is some issue with *codepen* code I guess because when I do "Tidy HTML" in the HTML tag you don't have the blank space issue... – kukkuz Sep 20 '16 at 09:15
  • 1
    Thank you so much. This really helps. I will mark this as the answer. – Dean Zhao Sep 20 '16 at 09:43