CSS - высота flexbox 100% не учитывает рост детей

#html #css

#HTML #css

Вопрос:

 div.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

div.container div.block {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.container div.advanced-items {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  height: 100%;
}

div.container div.advanced-items span {
  height: 100px;
}

 <div class="container">
  <div class="block">
    <span>some data here</span>
  </div>
  <div class="block">
    <span>some data here</span>
  </div>
  <div class="advanced-items">
    <span>1. item</span>
    <span>2. item</span>
    <span>3. item</span>
    <!-- more items here -->
  </div>
</div>

div.advanced-items значение высоты установлено равным 100% , но оно каким-то образом равно целой div.container высоте. Но мне нужно заполнить оставшуюся высоту div.container , учитывая высоту дочерних элементов.

Пожалуйста, помогите мне, как это сделать?

Ответ №1:

Мне нужно заполнить оставшуюся высоту div.container , учитывая высоту дочерних элементов. именно это и произошло, чтобы увидеть, как это произошло, просто добавьте border к div.advanced-items , чтобы увидеть, сколько места он занял

 div.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid black;
}

div.container div.block {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.container div.advanced-items {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  height: 100%;
  border: 1px solid black;
}

div.container div.advanced-items span {
  height: 100px;
}

 <div class="container">
  <div class="block">
    <span>some data here</span>
  </div>
  <div class="block">
    <span>some data here</span>
  </div>
  <div class="advanced-items">
    <span>1. item</span>
    <span>2. item</span>
    <span>3. item</span>
    <!-- more items here -->
  </div>
</div>

теперь вы div.advanced-items переносите всю левую высоту, кроме той, которая указана выше divs , но вы можете заставить их одинаково распределять высоту своего родителя, установив их height в 100%

 div.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid black;
}

div.container div.block {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border: 1px solid black;
}

div.container div.advanced-items {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  height: 100%;
  border: 1px solid black;
}

div.container div.advanced-items span {
  height: 100px;
}

 <div class="container">
  <div class="block">
    <span>some data here</span>
  </div>
  <div class="block">
    <span>some data here</span>
  </div>
  <div class="advanced-items">
    <span>1. item</span>
    <span>2. item</span>
    <span>3. item</span>
    <!-- more items here -->
  </div>
</div>

Ответ №2:

Вы хотите вот так? :

 div.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

div.container div.block {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.container div.advanced-items {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  height: 100%;
}

div.container div.advanced-items span {
  height: calc(100% / var(--item-count));
  min-height : 100px;
}

 <div class="container">
  <div class="block">
    <span>some data here</span>
  </div>
  <div class="block">
    <span>some data here</span>
  </div>
  <div style="--item-count:3;" class="advanced-items">
    <span>1. item</span>
    <span>2. item</span>
    <span>3. item</span>
    <!-- more items here -->
  </div>
</div>

Или, может быть, это? :

 div.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

div.container div.block {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.container div.advanced-items {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  overflow-y: scroll;
  height: 100%;
}

div.container div.advanced-items span {
  height: 100px;
}

 <div class="container">
  <div class="block">
    <span>some data here</span>
  </div>
  <div class="block">
    <span>some data here</span>
  </div>
  <div style = "--itemCount:3;" class="advanced-items">
    <span>1. item</span>
    <span>2. item</span>
    <span >3. item</span>
    <!-- more items here -->
  </div>
</div>