flexbox 内的弹性方向“行”和弹性方向“列”

Question

I am trying to make a navbar using flexbox. In my code I have the actual navbar wrapped with flex- direction:"row" to align the logo and the button. Now I want to have the nav-inner (the beige div) under the navbar (that should be 100vw wide), but actually it sits next to the navbar. I have tried to change the flex-direction to "column" inside my nav-menu div, but the Hamburger button goes out of the screen. Am I doing something wrong?

 body { margin: 0; overflow: hidden; } /* defaults */.safe-view { display: flex; height: 100vh; }.hamburger { height: 30px; width: 30px; } /**/ /* navbar */.navbar { position: sticky; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; width: 100vw; font-size: 1.2em; height: 100px; }.nav-menu { width: 100%; display: flex; flex-direction:row; /*flex-direction:column;*/ position: absolute; height: 100%; overflow: hidden; background-color: white; }.nav-inner { height: 100%; width: 100%; background-color: blanchedalmond; } /**/

 <div class="safe-view"> <div class="nav-menu"> <div class="navbar"> <h1>logo</h1> <button class="hamburger"></button> </div> <div class="nav-inner"></div> </div> </div>

Answer 1

This is a CSS box-model issue. You need to add box-sizing: border-box . This will ensure that padding is included in calculation of the width.

*{
   box-sizing: border-box;  
}

By default box-sizing is set to content-box . This will only care about the element content and shift padding and border outside of the element. That is why you saw the button push out to the right! This can also help you to understand further.

Also, flex-direction for. nav-menu needs to be set to column in order to position .nav-inner below.

Heres an alternative. I removed padding and just used calc() function to create padding. But always include box-sizing:border-box in your CSS:)

 *{ box-sizing: border-box; } body { margin: 0; padding: 0; overflow: hidden; }.safe-view { display: flex; height: 100vh; }.navbar { position: sticky; display: flex; flex-direction:row; align-items: center; justify-content: space-between; width: calc(100vw - 60px); margin: 0 auto; font-size: 1.2em; height: 100px; }.nav-menu { width: 100%; display: flex; flex-direction:column; position: absolute; height: 100%; overflow: hidden; background-color: white; }.nav-inner { height: 50px; width: 100%; background-color: blanchedalmond; }

 <div class="safe-view"> <div class="nav-menu"> <div class="navbar"> <h1 class="logo">logo</h1> <button class="hamburger">button</button> </div> <div class="nav-inner"></div> </div> </div>