2

Here's what I currently have: https://jsfiddle.net/Lt4cmfbo/

CSS

.parent {
    position: relative;
    float: none;
    height: 400px;
    width: auto;
    background: purple;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.childOne {
  background: blue;
  width: 100%;
  height: auto;
  overflow-y: auto;
  flex-grow: 1;
}

.childTwo {
  background: red;
}

.input-chat {
    background-color: white;
    margin: 5px auto;
    border: solid 1px #000;
    min-height:10px;
    max-height: 100px;
    overflow: auto;
    width: 95%;
}

HTML

<div class="parent">
  <div class="childOne">
    <p>
      content #1
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      hello
    </p>
  </div>
  <div class="childTwo">
      <div class="input-chat" contentEditable="true"></div>
  </div>
</div>

Basically, I'm trying to build a chat. Inside of the parent div are two child divs: the top one is scrollable (for displaying messages) and the bottom one is for typing your message to send.

I am using flex boxes to control the height so that both child divs together always equal the parent div height. The bottom child div must expand or shrink based on content (which I have done), while the top child div expands or shrinks based on the height of the bottom child div (which I have also done).

The problem is that I also want the top div to retain its scroll position as its height changes. If I scroll to the bottom of the top child div and see 'hello', I want to still see 'hello' as I am typing up several rows in the bottom div. But instead, the bottom div seems to hide it unless I manually scroll to reveal it.

I hope this was clear enough, but if it's not, I can try to explain it some other way.

I am hoping that my answer is in CSS (or CSS3), but if that's not possible, jquery or pure javascript is fine.

C. Meadows
  • 145
  • 1
  • 11
  • If you're ok using jQuery, you can use [Scroll](https://api.jquery.com/scroll/) And save the scroll position on a scroll event, then scroll back to there when the user pushes "Enter" – bobjoe Dec 13 '16 at 18:56
  • The problem with that is that I want it to remain exactly where it is even before the user hits 'enter'. That being said, you've given me an idea as to how to tackle this with jquery... but I am wondering if there is a cleaner solution? When I was originally messing with this, I had added a min-height to the 'childTwo' class. That actually kept the top child from scrolling (in the exact way that I wanted it) but it messed up the appearance of the bottom div so I couldn't keep it. – C. Meadows Dec 13 '16 at 19:10
  • 1
    I guess this answer solves it (how to make scroll stay at bottom): http://stackoverflow.com/a/34330934/2827823 .... let me know if it does, and I close this as a dupe – Asons Dec 13 '16 at 19:10
  • Yes!!! That is exactly what I needed. Thank you so much! @LGSon – C. Meadows Dec 13 '16 at 19:34

1 Answers1

1

Set the scrollTop equal to the scrollHeight:

let c1 = document.querySelector('.childOne'),
  c2 = document.querySelector('.childTwo>div'),
  b = document.querySelector('button');

b.addEventListener(
  'click', () => {
    c1.innerHTML += '<br>' + c2.innerHTML;
    c1.scrollTop = c1.scrollHeight;
    c2.innerHTML = '';
    c2.focus();
  },
  false);
.parent {
  position: relative;
  float: none;
  height: 400px;
  width: auto;
  background: purple;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.childOne {
  background: blue;
  width: 100%;
  height: auto;
  overflow-y: auto;
  flex-grow: 1;
}
.childTwo {
  background: red;
}
.test {
  background-color: white;
  margin: 5px auto;
  border: solid 1px #000;
  min-height: 10px;
  max-height: 100px;
  overflow: auto;
  width: 95%;
}
<div class="parent">
  <div class="childOne">
    <p>
      content #1
      <br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br>
      <br><br>hello
    </p>
  </div>
  <div class="childTwo">
    <div class="test" contentEditable="true"></div>
    <button>
      Add</button>
  </div>
</div>
Malk
  • 11,855
  • 4
  • 33
  • 32
  • 1
    I appreciate your answer! But I may not have been clear: my issue is that as the bottom child div expands, it covers up the content inside of the top div. So if I scroll to the bottom where it says 'hello' and begin typing a couple rows, the expanding div now covers up 'hello' even though the height seems to be adjusting just fine. – C. Meadows Dec 13 '16 at 19:02