如何实现div高度向上增长而非默认向下延伸？

核心逻辑：默认文档流内块级元素高度增加时默认向下拓展，只要把元素的底部位置锚定在父容器底部，高度增长时就会自动向上延伸。
下面提供两种常用实现方案：

方案1：定位实现（兼容性最好） #

给需要增长的.content的父容器加相对定位，给.content加绝对定位+底部对齐即可，修改你的CSS代码如下：

/* 原有其他样式保留，新增/修改以下属性 */
.abc {
  position: relative; /* 作为子元素的定位参照容器 */
}
.content {
  position: absolute;
  bottom: 0; /* 底部和父容器.abc的底部牢牢绑定 */
  width: 100%;
  /* 其他原有样式比如背景色、初始高度保留即可 */
}

你的HTML和JS代码不需要做任何修改，点击按钮后.content高度增加时就会向上延伸。

方案2：flex布局实现（代码更简洁） #

不需要使用定位，给父容器设置flex反向排列即可：

/* 原有其他样式保留，新增/修改以下属性 */
.abc {
  display: flex;
  flex-direction: column-reverse; /* 子元素从下往上排列 */
}

这个方案下，.content作为第二个子元素会排列在最底部，高度增加时就会往上方挤压第一个.img元素的位置，实现向上增长的效果。

内容的提问来源于stack exchange，提问作者user5711656