滚动父级中向上增长的内容答案

【问题标题】：Upward-growing content in scrolling parent滚动父级中向上增长的内容
【发布时间】：2018-08-18 16:26:43
【问题描述】：

我有一个固定高度的 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>

【问题讨论】：

标签： html css flexbox overflow

【解决方案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>

【讨论】：

谢谢，但是不幸的是，Javascript 滚动有点被 iOS 动量滚动破坏了，所以这不是一个选项（我正在动态添加内容）