css - examples - Bootstrap 4, haga que el grupo de listas sea desplazable, en una fila, con flexbox, con o sin desplazamiento del cuerpo
flexbox order (3)
De acuerdo con la especificación , el ajuste flex: 1 (en el elemento .main ) es equivalente a flex: 1 1 0 , abreviación de:
-
flex-grow: 1 -
flex-shrink: 1 -
flex-basis: 0
Sin embargo, por alguna razón, flex: 1 no está funcionando como se esperaba en su código. (Solo estoy revisando Chrome, según tu pregunta).
Sin embargo, si le da a .main la taquigrafía completa, y lo convierte en un contenedor flexible y agrega overflow , su diseño parece funcionar.
.main {
flex: 1 1 0; /* flex: 1, which you had before, is equivalent but doesn''t work */
display: flex;
flex-direction: column;
overflow-y: scroll;
}
Referencia:
EDITAR (basado en cambios a la pregunta)
Mi respuesta anterior elimina las barras de desplazamiento del body y proporciona una barra de desplazamiento vertical para la sección .main .
Para hacer que las barras de desplazamiento vertical estén disponibles para cada columna en la sección .main , realice este ajuste:
.main {
flex: 1 1 0;
display: flex;
}
.container-fluid {
display: flex;
}
.col-6 {
overflow-y: auto;
}
Estoy usando Bootstrap 4 (ahora estoy en alpha-6).
Tengo esta situación:
<body>
<!-- HERE I HAVE one div automatically generated with randomly ID and class -->
<div class="bigone">
<div class="container-fluid">
<div class="header">
My header
</div>
</div>
<div class="mybar">
Nav bar
</div>
<div class="main">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-header">
Card Header
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action"><b>FIRST LINK</b></a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action disabled"><b>LAST LINK</b></a>
</div>
<div class="card-footer">
Card Footer
</div>
</div>
</div>
<div class="col-6">
<h1>FIRST LINE</h1> So many words, so many words. So many words, so many words. So many words, so many words.
<br> So many words, so many words. So many words, so many words. So many words, so many words.
<br> So many words, so many words. So many words, so many words. So many words, so many words.
<br>
<h1>LAST LINE</h1>
</div>
</div>
</div>
</div>
<div class="footer">
Footer
</div>
</div>
<!-- HERE THAT DIV CLOSED -->
</body>
Este es el CSS :
.bigone {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1;
}
Hay una DEMO en plnkr : https://plnkr.co/edit/Q9PQIj8uDFY80bxJGks3
Necesito pie de página para estar abajo cuando el contenido de la página está vacío, por esta razón estoy usando: .bigone { height: 100vh; } .bigone { height: 100vh; } y Bootstrap Flexbox alinean utilidades como: <div class="bigone d-flex flex-column">
Ahora necesito el list-group en la card y el col-6 con "tantas palabras" para poder desplazarme, para tener una altura tanto para el máximo como para el inferior donde está el pie de página.
En pocas palabras: BODY no debe tener la barra de desplazamiento .
Mi encabezado y la altura del pie de página no son fijos, cambian.
¿Cómo? No soy un experto en flexbox.
No necesito IE, solo Chrome.
IMPORTANTE :
No puedo arreglar la altura de mi tarjeta con algo como esto:
height: calc(100vh - header.height - footer.height - etc...);
porque las alturas de mi encabezado, pie de página, etc. cambian dinámicamente.
Imagen del problema :
No estoy seguro de exactamente lo que estás buscando, pero creo que se trata de ajustar las alturas y el desbordamiento en CSS.
body {
overflow: hidden;
}
.bigone {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1;
}
.scrolly {
overflow-y:auto !important;
height: 100%;
}
.col-6 {
height: calc(100vh - 72px);
flex:1;
overflow: hidden;
}
Creó un nuevo Plunker para mostrar lo que estás buscando.
Para mantener el pie de página en la parte inferior, utilice los márgenes automáticos Bootstrap Flexbox .
Si desea mantener su contenido principal dentro de la altura de la vista inicial, use la propiedad flex-grow:1 con overflow-y:scroll . Su altura adoptará de manera receptiva en función del espacio que utilizan los otros elementos.
Espero que esto haya ayudado.