Aqui está o código que estou usando para obter o layout acima:
.header {
height: 50px;
}
.body {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
display: flex;
}
.sidebar {
width: 140px;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
}
.column {
padding: 20px;
border-right: 1px solid #999;
}<div class="header">Main header</div>
<div class="body">
<div class="sidebar">Sidebar</div>
<div class="main">
<div class="page-header">Page Header. Content columns are below.</div>
<div class="content">
<div class="column">Column 1</div>
<div class="column">Column 1</div>
<div class="column">Column 1</div>
</div>
</div>
</div>Omiti o código usado para estilizar. Você pode ver tudo isso na caneta .
O procedimento acima funciona, mas quando o contentconteúdo da área excede, faz a página inteira rolar. Eu só quero que a própria área de conteúdo role, então adicionei overflow: autoà contentdiv .
O problema com isso agora é que as próprias colunas não se estendem além da altura dos pais, portanto as bordas são cortadas também.
Aqui está a caneta mostrando o problema da rolagem .
Como definir a contentárea para rolar de forma independente, enquanto seus filhos ainda estão além contentda altura da caixa?
css
layout
multiple-columns
flexbox
Joseph Silber
fonte
fonte
Acabei de resolver esse problema de maneira muito elegante depois de muitas tentativas e erros.
Confira minha postagem no blog: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout
Basicamente, para tornar uma célula flexbox rolável, você precisa tornar todos os seus pais
overflow: hidden;, ou apenas ignorará suas configurações de estouro e aumentará o pai.fonte
Trabalhando
position:absolute;junto comflex:Posicione o item flexível com
position: relative. Em seguida, dentro dele, adicione outro<div>elemento com:Isso estende o elemento até os limites de seu pai em posição relativa, mas não permite estendê-lo. No interior,
overflow: auto;funcionará como esperado.Boa sorte...
fonte
box-sizing: border-boxmas isso pode ser mais complexo para determinados controles de terceiros).Um pouco tarde, mas isso pode ajudar: http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269
Basicamente você precisa colocar
html,bodyaheight: 100%;e enrole todo o seu conteúdo em um<div class="wrap"> <!-- content --> </div>CSS:
Trabalhou para mim. Espero que ajude
fonte
Adicione isso:
à regra para
.content {}. Isso o corrige na sua caneta para mim, pelo menos (no Firefox e no Chrome).Por padrão,
.contenthasalign-items: stretch, que faz com que todos os seus filhos de altura automática correspondam à sua própria altura, de acordo com http://dev.w3.org/csswg/css-flexbox/#algo-stretch . Por outro lado, o valorflex-startpermite que os filhos calculem suas próprias alturas e se alinhem na sua extremidade inicial (e transbordam e acionam uma barra de rolagem).fonte
Um problema que me deparei é que, para ter uma barra de rolagem, um elemento precisa de uma altura a ser especificada (e não como%).
O truque é aninhar outro conjunto de divs dentro de cada coluna e definir a exibição do pai da coluna para flexionar com flex-direction: column.
E aqui está o html:
https://jsfiddle.net/LiamFlavelle/czpjdfr4/
fonte
A solução para esse problema é apenas adicionar
overflow: auto;ao conteúdo. Para tornar o wrapper de conteúdo rolável.Além disso, há circunstâncias que ocorrem junto com o wrapper Flexbox e o
overflowedconteúdo rolável como este código de código .A solução é adicionar
overflow: hidden (or auto);ao pai do wrapper (definido com estouro: auto;) em torno de conteúdos grandes.fonte