在父div内定位div

在父div（蓝色轮廓）内放置两个div（绿色和黄色）的好方法是什么，使其看起来像下面的第二幅图？（默认情况下，第一个图形是div的堆叠方式）。

我有一些这样的蓝色div，其绿色div的高度可变（不同的文本量），而黄色div总是相同的。

我希望黄色div始终位于容器的底部。 编辑：忘记提及我所有的蓝色父级div都应具有相同的高度

我尝试将黄色div定位为position:absolute与bottom:0蓝色div相同，position:relative但是这没有用，因为如果绿色div之一包含大量文本，则该文本将与黄色div重叠；

蓝色父div设置为 height:100%

我在这里想念什么？

抱歉，如果有新手问题，我将进入CSS和UI设计。

您可以使用flexbox属性。我只是设置摘要的高度。您可以根据自己的喜好更改高度并检查文本。

.parent {
  display: flex; /* Activate Flexbox container */
  flex-direction: column; /* To set the main axis in block direction */
  justify-content: space-between; /* Align them distributed equally from first to last */
  height: 150px;
  width: 200px;
  border: 5px solid #00A2E8;
}

.child1 {
  background: green;
  height: 25%;
}

.child2 {
  background: yellow;
  height: 25%;
}