Flexbox contents don't stretch to fit container, despite not having their heights set anywhere

user_12958227 0
Viewed 347

Basically the title. I have a flex container, that has its height set to a specific value (100% but its parent is a specific one. I want the items to fill the available space, regardless of the content in them (specifically the second item, the treeview1, which has its overflow set to scroll. However, the items simply don't stretch to fill. Do you have any suggestions for me? Thanks :)

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>

Edit: Sorry if the formatting is off, i'm kind of new to this. Edit 2: Cleaned up the code a bit.

flexbox css html
2 Answers

We can set display: flex; flex-direction:column; height: 100vh; to the row class and set flex: 1 for the element that needs to fill the remaining space. In addition, try to set flex-direction: column for the flex container:

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;
  }

and 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>
user_16462400

I guess that "treeview1" element that you've mentioned is actually element with class "thumbnail-view". That element doesn't want to stretch because it is not a flex element. The only flex wrapper that you have is the one with "buttons-placeholder" class. So, what you need to do is to add 

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

to element that currently has "col-md-2" class.

user_128842210
Related