CSS Calc function not fixing height property

Question

I'm trying to develop a chat plugin and I face a problem when it comes to display the messages. Here it is: (some parts needed to be hidden because it is a highly confidential project)

Calm before the storm

What the >:((

<div id="tab-conversation">
   <div id="conversation-container"></div>
   <div id="input-container"></div>
</div>

$inputContainerHeight: 70px;

#tab-conversation {
  height: 100%;
}

#conversation-container {
  height: -moz-calc(100% - #{$inputContainerHeight});
  height: -webkit-calc(100% - #{$inputContainerHeight});
  height: calc(100% - #{$inputContainerHeight});
  overflow-y: auto;
  padding: 10px;
  padding-bottom: 0;
}

#input-container {
  height: $inputContainerHeight;
}

When messages are displayed in the conversation-container, the input-container is pushed out of the window because the conversation-container is a kiddo and does't want to stick to its height. Even with using the max-height property it dosn't work. But when I replace the calc function with a fixed height, the height is fixed. What do I miss ?

EDIT: I'm using scss

First, you need a preprocessor (like sass or less) to use variables like `$inputContainerHeight` — Vivick, Jul 31 '17 at 11:10
I'm using sccs and the `#{$inputContainerHeight}` syntax is required to interpolate the value. Without it I would obtain `height: calc(100% - $inputContainerHeight);` — Baboo, Jul 31 '17 at 12:03
_“What do I miss ?”_ – probably the usual: That a height in percent needs a parent element with an explicit height to begin with ... — CBroe, Jul 31 '17 at 12:18
I’d suggest you do yourself a favor, and implement this using flexbox ... — CBroe, Jul 31 '17 at 12:19

Baboo · Accepted Answer · 2017-08-01T12:54:24.117

Ok, as suggested by @CBroe I did myself a favor and turned every components into flex box where I defined the height property. At the end of the process I was still facing the same problem on firefox but then I found the missing ingredient in that post: Why doesn't flex item shrink past content size?. The hack is to define min-height: 0; (or min-width if the flex direction is horizontal).

To answer the initial question, a harsh but deserved comment from @CBroe:

a height in percent needs a parent element with an explicit height to begin with

Issue closed, thanks for your help

score 0 · Answer 2 · answered Jul 31 '17 at 11:11

0

are you using scss or css?

cause you cant use $inputContainerHeight: 70px; in css. you can use that in scss.

answered Jul 31 '17 at 11:11

pacanga

416
6
17

CSS Calc function not fixing height property

2 Answers2