CODEWITHSUNDEEP
cssvuetify.js
Cartman123
Cartman123

Reputation: 147

Make div with overflow grow and shrink until 100% of parent

I have this data table that contains certain elements. I want it to shrink or grow based on the amount of data, but stop growing when the height reaches 100% of the parent, and then it should show a scroll overflow.

I have a working version here. Which basically uses the hacky rules below to kinda make it work.

.content {
  height: 10px !important;
}  
.table-container {
  height: 100% !important;
}
.table-container /deep/ .v-data-table {
  height: calc(100% - 64px) !important;
}
.table-container /deep/ .v-data-table__wrapper {
  height: 100% !important;
}

I want it to look like this when it contains just a few elements, but instead it looks like this.

Make div with overflow grow and shrink until 100% of parent

Upvotes: 0

Views: 3098

Answers (2)

Cleee
Cleee

Reputation: 86

I am not sure if i understand you correctly. 

.layout {
  box-shadow: 0 1px 5px rgba(0,0,0,.15);
}
.table-container {
    height: auto;
  max-height:100%;
  overflow:auto;
  }

Codepen

But if you want the content to define the height of an Container, just set the height to auto as default. To define the point when the scrollbar shall appear use max-height. And overflow:auto; for the scrollbar.

Upvotes: 1

Barkha
Barkha

Reputation: 722

you can use a combination of max-height and overflow like this 

html, body {
  overflow: hidden !important;
}

.content {
  height: 10px !important;
}  
.table-container {
  max-height: 100vh;
}
.layout.table-container{
  overflow:auto;
}

Upvotes: 0

Related Questions