Verpackungsfehler mit Flexbox

Question

Ich habe zwei Divs, einer von ihnen mit fester Höhe, und der andere sollte den Rest der Seite abdecken. Beide sind in einem Wrapper DIV platziert. Jetzt, wenn ich den Inhalt des zweiten DIV überlaufe, möchte ich, dass der DIV scrollt (nicht die Seite). Mein aktuelles Problem ist, dass das zweite Div nicht vertikal mit dem ersten ausgerichtet ist. Ich verstehe nicht, was Fehler, den ich habe hier getan, vielleicht können Sie SpotIt:

#wrapper, body, html{ 
    height: 100vh; 
} 
#topbar { 
    width: 100%; 
    height: 2em; 
    border-bottom: $color 0.15em solid; 
    display: flex; 
    padding-left: 1em; 
    div { 
    line-height: 2em; 
    padding: 0 0.5em; 
    cursor: default; 
    transition: background 0.3s; 
    &:hover { 
     background: $accent; 
    } 
    } 
} 
#wrapper { 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: column; 
} 
#main { 
    display: flex; 
    flex-grow: 1; 
    overflow: auto; 
    .main-column { 
    border-left: $color 0.15em solid; 
    flex-grow: 1; 
    } 
} 

http://codepen.io/Chrisstar/pen/LRrOKP

Answer 1

Sie flex-flow statt flex-direction verwenden können und es auf .main auch .:

body { 
 
    background: #292929; 
 
    font-family: 'Open Sans', Helvetica, Arial, sans-serif; 
 
    height: 100%; 
 
    font-size: 16px; 
 
    color: white; 
 
    margin: 0; 
 
} 
 

 
#wrapper, body, html { 
 
    height: 100vh; 
 
} 
 

 
#topbar { 
 
    width: 100%; 
 
    height: 2em; 
 
    border-bottom: #7CB342 0.15em solid; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    padding-left: 1em; 
 
} 
 
#topbar div { 
 
    line-height: 2em; 
 
    padding: 0 0.5em; 
 
    cursor: default; 
 
    -webkit-transition: background 0.3s; 
 
    transition: background 0.3s; 
 
} 
 
#topbar div:hover { 
 
    background: #5F8339; 
 
} 
 

 
#wrapper { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-flex-wrap: wrap; 
 
     -ms-flex-wrap: wrap; 
 
      flex-wrap: wrap; 
 
    -webkit-flex-flow: column; 
 
     -ms-flex-flow: column; 
 
      flex-flow: column; 
 
    /* update */ 
 
} 
 

 
#main { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-flex-flow: column; 
 
     -ms-flex-flow: column; 
 
      flex-flow: column; 
 
    /* update */ 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex-grow: 1; 
 
     -ms-flex-positive: 1; 
 
      flex-grow: 1; 
 
    overflow: auto; 
 
} 
 
#main .main-column { 
 
    border-left: #7CB342 0.15em solid; 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex-grow: 1; 
 
     -ms-flex-positive: 1; 
 
      flex-grow: 1; 
 
} 
 

 
*, *::before, *::after { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<div id="wrapper"> 
 
    <div id="topbar"> 
 
    <div>One</div> 
 
    <div>Two</div> 
 
    </div> 
 
    <div id="main"> 
 
    <div class="main-column"> 
 
     e<br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> e 
 
     <br /> 
 
    </div> 
 
    <div class="main-column"> 
 
     w 
 
    </div> 
 
    <div class="main-column"> 
 
     w 
 
    </div> 
 
    </div> 
 
</div>

http://codepen.io/gc-nomade/pen/jrXpzL

Answer 2

Nicht sicher, ob ich Ihre Frage/Anfrage richtig habe, aber ist das, was Sie meinen;

$dark: #292929; 
 
$color: #7CB342; 
 
$accent: #5F8339; 
 
body { 
 
    background: $dark; 
 
    font-family: 'Open Sans', Helvetica, Arial, sans-serif; 
 
    height: 100%; 
 
    font-size: 16px; 
 
    color: white; 
 
} 
 
#wrapper, body, html{ 
 
    height: 100vh; 
 
} 
 
#topbar { 
 
    width: 100%; 
 
    min-height: 2em; 
 
    max-height: 2em; 
 
    border-bottom: $color 0.15em solid; 
 
    display: flex; 
 
    padding-left: 1em; 
 
    position: fixed; 
 
    .bar-item { 
 
    line-height: 2em; 
 
    padding: 0 0.5em; 
 
    cursor: default; 
 
    transition: background 0.3s; 
 
    &:hover { 
 
     background: $accent; 
 
    } 
 
    } 
 
} 
 
#wrapper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-flow: column; 
 
} 
 
#main { 
 
    margin-top: 2em; 
 
    display: flex; 
 
    flex-grow: 1; 
 
    overflow: auto; 
 
    position: relative; 
 
    .main-column { 
 
    max-height: 100%; 
 
    border-left: $color 0.15em solid; 
 
    flex: 1; 
 
    } 
 
} 
 
*, *::before, *::after { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<div id="wrapper"> 
 
    <div id="topbar"> 
 
    <div class="bar-item">One</div> 
 
    <div class="bar-item">Two</div> 
 
    </div> 
 
    <div id="main"> 
 
    <div class="main-column"> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
     e<br /> 
 
    </div> 
 
    <div class="main-column"> 
 
w 
 
    </div> 
 
    <div class="main-column"> 
 
w 
 
    </div> 
 
    </div> 
 
</div>