I am in the process of creating a chat plugin and I have encountered an issue with displaying messages. Certain parts of the project had to be concealed due to its confidential nature.
<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;
}
While trying to display messages in the conversation-container, the input-container gets pushed out of view as the conversation-container seems reluctant to maintain its designated height. Despite using the max-height property, the issue persists. However, upon replacing the calc function with a fixed height, the problem is resolved. What could be causing this discrepancy?
EDIT: My development environment involves scss