滚动父中向上增长的内容

Question

我有一个固定高度的div（=>黑色边框），它具有动态增长的内容（=>具有红色背景的文本）。内容需要位于div的底部并向上增长。如果内容比黑匣子高，则黑匣子必须滚动。

我尝试了以下方法，但是它破坏了滚动。.

div {
  height: 200px;
  width: 200px;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  
  border: 1px solid black;  
}


p {
  background-color: lightcoral;
  color: black;
}

body { display: flex; }

<div>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      
</div>

<div>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  
</div>

Answer 1

也许您可以使用javascript函数将div滚动到底部。

var objDiv = document.getElementById("div1");
objDiv.scrollTop = objDiv.scrollHeight;

div {
  height: 200px;
  width: 200px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  /*remove justify-content: flex-end;*/
  border: 1px solid black;  
}


p {
  background-color: lightcoral;
  color: black;
}

body { display: flex; }

<div>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      
</div>

<div id="div1">
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  
</div>