Html Question posted in
Some basic documentation can be found here.

Html – Stop overflow of two elements in one container

Run the following snippet:

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
}

.chatPanel {
    display: flex;
    flex-direction: column;
    background-color: #e0e0e0;
    height: 100%;
}

.chatListContainer {
    background-color: #d9faff;
    position: relative;
}

.inputBar {
    background-color: #d9ffdb;
    padding: 5px;
}

.chatMessage {
    background-color: #ffc1c1;
    margin: 10px;
    padding: 10px;
    font-size: 18px;
}

.floatingIndicator {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: purple;
}

.chatList {
    
}
<!DOCTYPE html>
<html lang="en">
<body>

<div class="chatPanel">
    <div class="chatListContainer">
        <div class="chatList">
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
        </div>
        <div class="floatingIndicator">Text here</div>
    </div>
    <div class="inputBar">
        InputBar
    </div>
</div>

</body>
</html>

Note that everything scrolls. This is the problem: I want chatListContainer and inputBar to both be contained inside chatPanel so that inputBar stays fixed at the bottom.
At first sight, this could be easily achieved by adding overflow: auto to chatListContainer, like this:

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
}

.chatPanel {
    display: flex;
    flex-direction: column;
    background-color: #e0e0e0;
    height: 100%;
}

.chatListContainer {
    background-color: #d9faff;
    position: relative;
    overflow: auto;
}

.inputBar {
    background-color: #d9ffdb;
    padding: 5px;
}

.chatMessage {
    background-color: #ffc1c1;
    margin: 10px;
    padding: 10px;
    font-size: 18px;
}

.floatingIndicator {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: purple;
}

.chatList {

}
<!DOCTYPE html>
<html lang="en">
<body>

<div class="chatPanel">
    <div class="chatListContainer">
        <div class="chatList">
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
        </div>
        <div class="floatingIndicator">Text here</div>
    </div>
    <div class="inputBar">
        InputBar
    </div>
</div>

</body>
</html>

However, now the purple floatingIndicator is moving when the page is scrolled. I want it to remain fixed on the screen in the bottom-left corner of chatListContainer (but still above inputBar). Basically, I want the chatList to be scrollable. I have spent hours now trying to figure out how to achieve this specific setup but to no avail. Does anyone know a trick or something to make it work?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Kastet's answer is good, but I tried some things out and actually found a way to fix it without moving floatingIndicator, and I'm quite puzzled why it works (especially the height: 1%;):

        html {
        height: 100%;
    }
    body {
        margin: 0;
        height: 100%;
    }
    .chatPanel {
        display: flex;
        flex-direction: column;
        background-color: #e0e0e0;
        height: 100%;
    }
    .chatListContainer {
        background-color: #d9faff;
        position: relative;
        display: flex; /* added */
        height: 1%; /* added */
        flex-grow: 1; /* added */
    }
    .inputBar {
        background-color: #d9ffdb;
        padding: 5px;
    }
    .chatMessage {
        background-color: #ffc1c1;
        margin: 10px;
        padding: 10px;
        font-size: 18px;
    }
    .floatingIndicator {
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: purple;
    }
    .chatList {
        flex-grow: 1; /* added */
        overflow: auto; /* added */
    }
    <!DOCTYPE html>
<html lang="en">
<body>

<div class="chatPanel">
    <div class="chatListContainer">
        <div class="chatList">
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
        </div>
        <div class="floatingIndicator">Text here</div>
    </div>
    <div class="inputBar">
        InputBar
    </div>
</div>

</body>
</html>


  2. 0

    You can move the "Text here" div into the inputBar div, and add some more styling for it:

    html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
}

.chatPanel {
    display: flex;
    flex-direction: column;
    background-color: #e0e0e0;
    height: 100%;
}

.chatListContainer {
    background-color: #d9faff;
    position: relative;
    overflow: auto;
}

.inputBar {
    background-color: #d9ffdb;
    padding: 5px;
}

.chatMessage {
    background-color: #ffc1c1;
    margin: 10px;
    padding: 10px;
    font-size: 18px;
}

.floatingIndicator {
    position: absolute;
    left: 0;
    bottom: 28px;
    background-color: purple;
}

.chatList {

}
    <!DOCTYPE html>
<html lang="en">
<body>

<div class="chatPanel">
    <div class="chatListContainer">
        <div class="chatList">
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
        </div>
    </div>
    <div class="inputBar">
        <div class="floatingIndicator">Text here</div>
        InputBar
    </div>
</div>

</body>
</html>
    Login or Signup to reply.
  3. 0

    A good use for sticky position

    body {
  margin: 0;
  height: 100vh;
}

.chatPanel {
  display: flex;
  flex-direction: column;
  background-color: #e0e0e0;
  height: 100%;
}

.chatListContainer {
  background-color: #d9faff;
  overflow: auto;
}

.inputBar {
  background-color: #d9ffdb;
  padding: 5px;
}

.chatMessage {
  background-color: #ffc1c1;
  margin: 10px;
  padding: 10px;
  font-size: 18px;
}

.floatingIndicator {
  position: sticky;
  bottom: 0;
  width: fit-content;
  background-color: purple;
}
    <div class="chatPanel">
  <div class="chatListContainer">
    <div class="chatList">
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
      <div class="chatMessage">Chat message</div>
    </div>
    <div class="floatingIndicator">Text here</div>
  </div>
  <div class="inputBar">
    InputBar
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search