如何使像浮动：下降相对位置？

Question

我试图将元素移到其父元素的底部，但唯一的方法是将其定位为绝对，但我希望它是相对的。

#output{
  height: 100px;
  background-color: red;
}

#inner{
  height: 30px;
  background-color: blue;
  /*float: down*/
}

<div id="output">
  <div id="inner"></div>
</div>

Answer 1

#output{
  height: 100px;
  background-color: red;
  display: flex;
  flex-direction: column;
  
}

#inner{
   margin-top: auto;
   height: 30px;
   background-color: blue;
   /*float: down*/
}

<div id="output">
  <div id="inner"></div>
</div>