Flex Disposizione con posizione fissa (senza scorrimento) barra laterale

Question

ho un layout con barre laterali tela destro e sinistro, che racchiude l'area del contenuto principale nel mezzo.

Le barre laterali e contenuto principale sono elementi flessibili, posizionati in un layout flessibile da sinistra a destra.

Le barre laterali contengono menu e meta collegamenti.

La mia domanda è: sfogliando, quando l'area del contenuto, è possibile lasciare le barre laterali in posizione fissa, in modo tale da rimanere in posizione superiore e non scorrere verso il basso?

JS Fiddle: http://jsfiddle.net/Windwalker/gfozfpa6/2/

HTML:

<div class="flexcontainer"> 
    <div class="flexitem" id="canvas-left"> 
     <p>This content should not scroll</p> 
    </div> 
    <div class="flexitem" id="content"> 
     <div> 
      <p>Scrolling Content</p> 
     </div> 
    </div> 
    <div class="flexitem" id="canvas-right"> 
     <p>This content should not scroll</p> 
    </div> 
</div> 

CSS:

.flexcontainer { 
    display: flex; 
    flex-direction: row; 
    min-height: 100%; 
    align-items: stretch; 
} 
.flexitem { 
    display: flex; 
} 
#canvas-left { 
    background: yellow; 
    order: -1; 
    flex: 0 0 57px; 
} 
#content { 
    background: green; 
    order: 1; 
    padding: 1rem; 
} 
#content div { 
    display: block; 
} 
#canvas-right{ 
    background: blue; 
    order: 2; 
    flex: 0 0 57px; 
} 

Answer 1

Consultare la domanda simile con la soluzione fornita: How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar.

Secondo il codice si può anche avvolgere la contenuto interno in "position: fixed" wrapper:

<div class="flexitem" id="canvas-left"> 
    <div class="fixed"> 
     <p>This content should not scroll</p> 
    </div> 
</div> 

E aggiungere styling corretto nei CSS:

.fixed { 
    position: fixed; 
    width: 57px; /* according to #canvas-left */ 
} 

Ecco un esempio del vostro codice con barra laterale sinistra fissa: http://jsfiddle.net/8hm3849m/. Nota che questo trucco non ti fornirà una griglia flessibile adatta per le barre laterali, la larghezza del wrapper dovrebbe essere corretta (o imposta dinamicamente tramite JavaScript).

Answer 2

io non so come farlo con flex, ma ecco un easyer/css alternativo rimuovere tutto ciò che flex ... e cercare di non aggiungere mai imbottitura per un div esterno, la sua easyer in voci interiori, allora non avete bisogno di calcolare se ci sono molte div

.flexcontainer { 
    display: block; 
    min-height: 100%; 
    align-items: stretch; 
} 
.flexitem { 
    display: flex; 
} 
#canvas-left { 
    background: yellow; 
    order: -1; 
    left: 0px; 
    width: 20%; 
    position: fixed; 
} 
#content { 
    position: absolute; 
    background: green; 
    order: 1; 
    width: 60%; 
    left: 20%; 
} 
#content p { 
    display: block; 
    padding: 1rem; 
} 
#canvas-right{ 
    background: blue; 
    order: 2; 
    right: 0px; 
    width: 20%; 
    position: fixed; 
}