html css css3 flexbox

html - Flexbox redimensionar y desbordamiento desplazable



css css3 (1)

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: