html - Flexbox redimensionar y desbordamiento desplazable
css css3 (1)
Esta pregunta ya tiene una respuesta aquí:
Tengo contenido al que estoy redimensionando, y quiero tener un encabezado fijo que no crezca / disminuya y que no forme parte del contenido desplazable. Con el contenido a continuación, puede desplazarse si no hay suficiente espacio.
El contenido de la envoltura externa (
flexGrowWrapper
) tiene un
flex-grow: 1
y la envoltura interior tiene la
height: 100%; overflow-y: auto
height: 100%; overflow-y: auto
.
El proceso de pensamiento aquí es que
flexGrowWrapper
llenará el espacio restante dentro del div de
resize
, la envoltura interna tomará toda la altura de la
flexGrowWrapper
y si hay un desbordamiento, debería desplazarse.
Lo que está sucediendo es que
flexGrowWrapper
crece para llenar el área de cambio de
resize
, pero parece que su contenido está dictando que es de altura mínima.
¿Cómo puedo hacer que
flexGrowWrapper
nunca supere la altura del área de cambio de tamaño?
$("button").click(function() {
$(".resize").toggleClass("small");
});
.resize {
height: 200px;
display: flex;
flex-direction: column;
overflow-y: hidden;
width: 300px;
}
.resize.small {
height: 100px;
}
.heading {
flex: 0 0 auto;
}
.flexGrowWrapper {
border: 2px solid red;
flex-grow: 1;
}
.wrapper {
height: 100%;
overflow-y: auto;
}
.content {
display: flex;
flex-direction: row;
clear: both;
}
<button>
Resize
</button>
<div class="resize">
<div class="heading">
<label>Some heading that wont scroll</label>
</div>
<div class="flexGrowWrapper">
<div class="wrapper">
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
</div>
</div>
</div>
<div>
Something else here
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Nota: Miré esta pregunta similar , pero parece tener algunas diferencias, y no pude lograr que las soluciones funcionaran para mí.
Agregue
min-height: 0
a
.flexGrowWrapper
- vea la demostración a continuación:
$("button").click(function() {
$(".resize").toggleClass("small");
});
.resize {
height: 200px;
display: flex;
flex-direction: column;
overflow-y: hidden;
width: 300px;
}
.resize.small {
height: 100px;
}
.heading {
flex: 0 0 auto;
}
.flexGrowWrapper {
border: 2px solid red;
flex-grow: 1;
min-height: 0; /* ADDED */
}
.wrapper {
height: 100%;
overflow-y: auto;
}
.content {
display: flex;
flex-direction: row;
clear: both;
}
<button>
Resize
</button>
<div class="resize">
<div class="heading">
<label>Some heading that wont scroll</label>
</div>
<div class="flexGrowWrapper">
<div class="wrapper">
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
</div>
</div>
</div>
<div>
Something else here
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Porque esto funciona
Tenga en cuenta que esto se debe a que para una
columna flexbox
el valor predeterminado
min-height
es
auto
(a lo largo del
eje flexible
).
Puedes ver algunos ejemplos de este comportamiento a continuación: