CODEWITHSUNDEEP
cssvue.js
ekjcfn3902039
ekjcfn3902039

Reputation: 1839

How to get CSS overflow & height:calc to work in a resizable div

I am using vue-grid-layout, which provides x number of divs. Each div is resizable by dragging the icon on its bottom right corner.

I am trying to split the div into 3 logical parts. I want to have

I am having trouble containing the middle portion in it's own space. It seems to spill over no matter what I do. It doesn't seem that adding an overflow:auto and height:calc(100%-topHeight+bottomHeight) to the style of the middle div works as expected. As an added bonus, I'm not sure I know the height of the parent div as they are resizable and calculated from the grid-layout/grid-item components.

I have a demonstration in the following fiddle https://jsfiddle.net/uglyhobbitfeet/gs2qf3t6/1/

Below is the main block of code that I am trying to get to work.

'            <v-layout secondary>',
'              <v-flex xs12>',
'                <div style="height:25px;background-color:green">TOP</div>',
'              </v-flex>',
'              <v-flex xs12 style="height:calc(100%-50px);overflow:auto;">',
'                <div style="height:125px;background-color:blue">MIDDLE</div>',
'              </v-flex>',    
'              <v-flex xs12>',
'                <div style="height:25px;background-color:red">BOTTOM</div>',
'              </v-flex>',
'            </v-layout>',

Upvotes: 0

Views: 374

Answers (1)

Scrimothy
Scrimothy

Reputation: 2536

You could achieve this with Flexbox or Grid layouts. The markup is the same for both and neither relies on known heights or calcs.

HTML

<div class="container">
  <header>Header</header>
  <div class="body">
    <div class="body-content">Body</div>
  </div>
  <footer>Footer</footer>
</div>

Option 1: Flex CSS

.container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.body {
  flex: 1 1 auto;
  overflow: auto;
}

header,
footer {
  flex: 0 0 auto;
}

Option 2: Grid CSS

.container {
  display: grid;
  grid-template:
    "header" auto
    "body" 1fr
    "footer" auto;
}

.body {
  overflow: auto;
}

Upvotes: 1

Related Questions