Содержимое Flexbox не растягивается, чтобы соответствовать контейнеру, несмотря на то, что его высоты не установлены нигде

Question

В основном название. У меня есть гибкий контейнер, для которого его высота установлена ​​равной указанному c значению (100%, но его родительский элемент является указанным c. Я хочу, чтобы элементы заполняли доступное пространство независимо от содержимого в них (в частности, второй элемент, treeview1, у которого переполнение установлено для прокрутки. Однако элементы просто не растягиваются для заполнения. У вас есть какие-либо предложения для меня? Спасибо:)

html, body, .container-fluid, .row, #left-panel {
  height: 100%;
}

.thumbnail-view {
  margin: 2px;
  padding: 2px;
  width: 100%;
  overflow-y: scroll;
}

.buttons-placeholder {
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}

.buttons-placeholder button {
    margin: 2px;
    flex-grow: 1;
}

.btn-success {
  width: 100%;
  margin-bottom: 10px;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2" id="left-panel">
      <div class="buttons-placeholder">
        <button type="button" class="btn btn-primary">Load Batch</button>
        <button type="button" class="btn btn-primary">Save Batch</button>
      </div>
      <div class="thumbnail-view"></div>
      <button type="button" class="btn btn-success">Submit</button>
    </div>
  </div>
</div>

Редактировать: Извините, если форматирование выключено, я новичок в этом. Редактировать 2: немного очистить код.

Answer 1

Полагаю, что упомянутый вами элемент "treeview1" на самом деле является элементом с классом "thumbnail-view". Этот элемент не хочет растягиваться, потому что это не гибкий элемент. Единственный гибкий упаковщик, который у вас есть, это класс с кнопками-заполнителями. Итак, вам нужно добавить

style="display: flex; flex-direction: column; justify-content: space-between;"

к элементу, который в настоящее время имеет класс "col-md-2".

Answer 2

Мы можем установить display: flex; flex-direction:column; height: 100vh; для класса row и установить flex: 1 для элемента, который должен заполнить оставшееся пространство. Кроме того, попробуйте установить flex-direction: column для гибкого контейнера:

html, body, .container-fluid, .row, #left-panel {
   display: flex;
   flex-direction: column;
   height: 100vh;
}

.thumbnail-view {
    margin: 2px;
    padding: 2px;
    width: 100%;
    overflow-y: scroll;
    background-color: lightpink;
    flex: 1;
 }

 .buttons-placeholder {
     padding-right: 15px;
     padding-left: 15px;
     display: flex;
     justify-content: center;
     flex-flow: row wrap;
  }

  .buttons-placeholder button {
      margin: 2px;
      flex-grow: 1;
  }

  .btn-success {
      width: 100%;
      margin-bottom: 10px;
  }

и html:

<div class="container-fluid">
    <div class="row">
        <div class="buttons-placeholder">
            <button type="button" class="btn btn-primary">Load Batch</button>
            <button type="button" class="btn btn-primary">Save Batch</button>
          </div>
          <div class="thumbnail-view"></div>
          <button type="button" class="btn btn-success">Submit</button>
    </div>
  </div>