Javascript 从底部开始将元素追加到div？

我有以下代码：

$（“按钮”）。单击（函数（）{
$（'父'）.append（'元素'）；
});
#父级{
高度：200px；
宽度：100px；
边框：1px实心#ccc；
}

添加
设置
垂直对齐：底部将起作用


$（“按钮”）。单击（函数（）{
$（'父'）.append（'元素'）；
});
#父级{
高度：200px；
宽度：100px；
边框：1px实心#ccc；
显示：表格单元格；
垂直对齐：底部对齐；
}

添加
也许你是这个意思


$（“按钮”）。单击（函数（）{
$（'#parent.container'）.append（'element'）；
});
#父级{
位置：相对位置；
高度：200px；
宽度：100px；
边框：1px实心#ccc；
}
#父容器{
位置：绝对位置；
底部：0；
左：0；
}

添加
使用
变换：旋转（180度）


他的回答解决了我的问题。但是，在某些情况下，
display:table cell
可能无法按预期工作，因为它有一些缺点：


它不适用于溢出（需要包装在div中）
它需要用
display:table
包装在一个父级中，以具有100%的宽度（否则，我们需要做一些类似于将宽度设置为1000000px的黑客操作）

我只是找到了另一种方法来解决我的问题


添加
#母公司{
高度：200px；
宽度：100px；
溢出y：自动；
边框：1px实心#ccc；
显示器：flex；
弯曲方向：柱反向；
}
var i=0；
$（“按钮”）。单击（函数（）{
$（'#parent'）。前置（'element'+（++i）+''；
});


注意：由于伸缩方向是
列反转
，因此我们需要将jquery函数更改为
prepend（）
，而不是
append（）
，我有一个不同的情况，并找到了一个解决方案，也许它可以帮助某人：

我有一个div（container）并在其中添加了多行可拖动的项，并使用：

变换：旋转（180度）
拧紧可拖动功能，以便：

对于容器或父容器：

.parent{
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
    align-content: flex-start;
}

$('button').click(function() {
    $('.parent').append('<div>element</div>');
});

.parent{
显示器：flex；
柔性包装：反向包装；
证明内容：中心；
调整内容：灵活启动；
}
$（“按钮”）。单击（函数（）{
$（'.parent'）。追加（'element'）；
});
你说的“元素将从底部开始添加”是什么意思？元素将从父元素的底部开始添加。。在父母里面还是外面？像这样的？我添加了一张图片来说明我的问题这正是我几个小时以来一直在寻找的。
<div id="parent"></div>
<button>
Add
</button>

#parent {
  height: 200px;
  width: 100px;
  overflow-y: auto;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column-reverse;
}

var i = 0;
$('button').click(function() {
    $('#parent').prepend('<div>element' + (++i) + '</div>');
});

.parent{
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
    align-content: flex-start;
}

$('button').click(function() {
    $('.parent').append('<div>element</div>');
});