html - Изменение размера Flexbox и прокручиваемое переполнение



css css3 (1)

На этот вопрос уже есть ответ здесь:

У меня есть контент, размер которого я изменяю, и я хочу иметь фиксированный заголовок, который не увеличивается / не уменьшается и не является частью прокручиваемого контента. С содержанием ниже становится прокручиваемым, если не хватает места.

flexGrowWrapper внешняя обертка ( flexGrowWrapper ) имеет flex-grow: 1 а внутренняя обертка имеет height: 100%; overflow-y: auto height: 100%; overflow-y: auto . Мысленный процесс здесь заключается в том, что flexGrowWrapper заполнит все оставшееся пространство внутри div resize , тогда внутренняя оболочка займет всю высоту flexGrowWrapper и, если произойдет переполнение, она должна прокрутиться.

Происходит то, что flexGrowWrapper , чтобы заполнить область resize , но кажется, что его содержимое диктует его минимальную высоту.

Как сделать так, чтобы flexGrowWrapper никогда не выходил за пределы высоты области 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>

Примечание: я посмотрел на этот похожий вопрос , но, похоже, у него есть некоторые отличия, и я не смог заставить решения работать на меня.


Добавьте min-height: 0 к .flexGrowWrapper - см. Демонстрацию ниже:

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

Почему это работает

Обратите внимание, что это потому, что для flexbox столбца значение min-height по умолчанию равно auto (вдоль оси flex ). Вы можете увидеть некоторые примеры такого поведения ниже:





flexbox