html - two - w3schools css flex box



Redimensionamento de caixa flexível e estouro rolável (1)

Adicione min-height: 0 a .flexGrowWrapper - veja a demonstração abaixo:

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

Por que isso funciona

Observe que isso ocorre porque, para um flexbox de coluna, o valor padrão de min-height é auto (ao longo do eixo flexível ). Você pode ver alguns exemplos desse comportamento abaixo:

Esta questão já tem uma resposta aqui:

Eu tenho conteúdo que estou redimensionando e quero ter um cabeçalho fixo que não cresça / encolha e não faça parte do conteúdo rolável. Com o conteúdo abaixo, tornando-se rolável, se não houver espaço suficiente.

O envoltório externo de conteúdo ( flexGrowWrapper ) tem um flex-grow: 1 e o wrapper interno tem height: 100%; overflow-y: auto height: 100%; overflow-y: auto . O processo de pensamento aqui é que o flexGrowWrapper irá preencher qualquer espaço remanescente dentro do div de resize , o invólucro interno irá então pegar toda a altura do flexGrowWrapper e se houver overflow, ele deverá rolar.

O que está acontecendo é que o flexGrowWrapper cresce para preencher a área de resize , mas parece que o conteúdo está ditando a altura mínima.

Como posso fazer flexGrowWrapper nunca ir além da altura da área de 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: Eu olhei para essa pergunta semelhante , mas parece que há algumas diferenças, e não consegui que as soluções funcionassem para mim.





flexbox