フレックスボックスでの折り返しエラー

Question

2つのDIVがあり、そのうちの1つは固定された高さで、もう1つはページの残りの部分を覆う必要があります。両方ともラッパーDIVに置かれます。今、2番目のDIVのコンテンツがオーバーフローした場合、DIVがスクロールするようにします（ページではありません）。 私の現在の問題は、2番目のdivが最初のdivと垂直に整列していないことです。

#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

があなたの代わりにflex-directionをflex-flowを使用することができますし、あまりにも.mainに適用します。：

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>

：私は多分あなたはspotitことができ、私はここでやった間違いを理解していません

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

Answer 2

あなたの質問/要求が正しいかどうかはわかりませんが、これはあなたが意味するものです。

$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>