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

Answer 1

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

Answer 2

are you using scss or css?

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