html - Ridimensionamento Flexbox e overflow scorrevole



css css3 (1)

Aggiungi min-height: 0 a .flexGrowWrapper - vedi la demo di seguito: 

$("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>

Perché questo funziona

Si noti che ciò è dovuto al fatto che per un flexbox a colonna il valore min-height predefinito è auto (lungo l' asse flessibile ). Di seguito puoi vedere alcuni esempi di questo comportamento:

Questa domanda ha già una risposta qui:

Ho dei contenuti che sto ridimensionando e desidero avere un'intestazione fissa che non cresca / riduca e non faccia parte del contenuto scorrevole. Con il contenuto sottostante diventa scorrevole se non c'è abbastanza spazio.

Il wrapper esterno di contenuto ( flexGrowWrapper ) ha un flex-grow: 1 e il wrapper interno ha height: 100%; overflow-y: auto height: 100%; overflow-y: auto . Il processo di pensiero qui è che flexGrowWrapper riempirà tutto lo spazio rimanente all'interno del div resize , l'involucro interno prenderà quindi l'intera altezza di flexGrowWrapper e se c'è troppo pieno, dovrebbe scorrere.

Quello che sta succedendo è che flexGrowWrapper cresce per riempire l'area di resize , ma sembra che il suo contenuto stia determinando la sua altezza minima.

Come posso fare in modo che flexGrowWrapper non vada mai oltre l'altezza dell'area di resize ? 

$("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: ho esaminato questa domanda simile , ma sembra avere alcune differenze e non sono riuscito a far funzionare le soluzioni per me.




html   css   css3   flexbox  


flexbox