I am currently working on developing a sleek messaging system and I have encountered an issue with the interface design. My project is built using Materialize, however, I am open to tweaking it with custom CSS if necessary. The layout consists of a list of messages on the left side, while the selected message is displayed in the remaining space on the right. This setup is quite standard.
The problem arises when there are numerous messages in the list or the text within the messages is too lengthy to fit within the viewing height without scrolling.
I strive for a non-scrollable page overall, but I also require the ability to scroll through the message list and view individually.
In my attempts to address this issue, I implemented the following CSS:
.message-view {
height: 40vh;
overflow-y: scroll;
}
While this approach somewhat works, it falls short of my desired outcome. What I truly aim for is the .message-view div to dynamically adjust its height to occupy the remaining space. Manually calculating heights based on preceding elements feels cumbersome to me and might not ensure precise heights across all devices.
TLDR: I seek a solution where a div can adapt its height dynamically to facilitate scrolling using either CSS or Materialize. Any suggestions?
Below is an illustration of the current dilemma (the list on the left is scrollable with a suboptimal height set arbitrarily at 80vh, along with the message view lacking scrolling functionality):
html, body {
width: 100%;
height: 100vh;
overflow: hidden;
}
.content {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-between;
}
.message-list-scroller {
width: 30%;
height: 80vh;
overflow-y: scroll;
}
.message-list {
width: 98%;
height: 100%;
border: 1px solid gray;
}
.message-list-item {
width: 100%;
border-bottom: 1px solid gray;
}
.message-view {
width: 70%;
height: 100%;
padding: 10px;
}<html>
<body>
<h1>Message page</h1>
<div class="content">
<div class="message-list-scroller">
<div class="message-list">
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
</div>
</div>
<div class="message-view">
<h2>Title</h2>
<p>
Excessively long content...
</p>
</div>
</div>
</body>
</html>