Html 将子Div底部对齐

我试图建议使用某种缩放在css中进行简单对齐

我有一个水平网格，我想在一个div子对象中结合CSS缩放

所以我在relative中有一个父div，然后在absolute中有一个div子div，包含一个由8个元素组成的网格

当我点击Doc1时，我希望顶部的两行在红色容器之外

当我点击Doc2时，我希望顶部的列在红色容器之外

当我点击Doc1和Doc2时，我只想看到顶行，因为这很简单，它是css声明的顺序

为此，我使用了translateY函数，它完全满足了我的需要

我的问题是对于下面的部分，当它是文档1时，我希望下面有2行，当它是文档2时，我希望下面有6行。但要做到这一点，我使用高度

如果我单击doc1和Doc2，我会得到下面的3行而不是2个首字母

对齐不正确，目标是显示最大区域

我不知道我是否很清楚：）

---

真为我的坏榜样感到抱歉

我还在睡觉

我举了一个简单的例子来说明我的例子

想法（可能不好）： 基本上，我有两个垂直对齐的div

我想在第一个div和/或第二个div上应用translateY作为第一个div适合的尺寸

目标： 目标是在父div之外增加子div，并按顶部或底部设置百分比

示例：addClass添加translateY（-25%），div的顶部为25%外部，AddOther Class添加translateY（25%），div的底部为25%外部

PS：我试着放一个flexbox，但当我使用translateY时，flexbox不适合。 我真的很想使用translateY，因为它尊重比例。 translateY（-25%）允许在父div之外有25%的div子级，这正是我想要的：）

我希望我的解释现在更清楚了

UP
向下
按键{
盒影：0 3px 0#00823F；
}
分区#集装箱{
高度：100px；
宽度：100px；
利润率：100像素；
边框：1px纯红；
}
div#容器>div{
身高：100%；
宽度：90%；
左边距：5px；
边框：1px纯蓝色；
}
div#container.up>div:第一个孩子{
转化：translateY（-25%）；
}
div#container.down>div:last child{
转化：translateY（25%）；
}

现在还不清楚你想在这里做什么。很清楚，我写的东西并不意味着什么：）好的，我出去，我会睡觉最后只使用css变量和小javascript：很抱歉被弄糊涂了：）

    div.parent {
  width: 100px;
  height: 100px;
  outline: 1px solid red;
  margin: 100px;
  position: relative;
}

div.parent > div {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 90%;
  left: 5%;
}

div.parent > div > div {
  flex: 1 0 0;
}

div.doc1 > div > div, 
div.doc2 > div > div,
div.docx > div > div
{
  outline: 1px solid blue;
}

/* 6h à 18h */
div.doc1 > div {
  transform: translateY(-25%);
}

/* 3h à 6h */
div.doc2 > div {
  transform: translateY(-12.5%);
}

/* 3h à 6h */
div.doc2 > div {
  height: 800%;
}

/* 6h à 18h */
div.doc1 > div {
  height: 200%;
}

div.docx > div {
  transform: translateY(-25%);
  height: 100%;
}

button.press {
  box-shadow: 0 3px 0 #00823F;
}

<button id='up'>UP</button>
<button id='down'>DOWN</button> 
<div id="container">
  <div></div>
  <div></div>
</div>


button.press {
  box-shadow: 0 3px 0 #00823F;
}

div#container {
  height : 100px;
  width : 100px;
  margin : 100px;
  border : 1px solid red;
}

div#container>div {
  height : 100%;
  width : 90%;
  margin-left : 5px;
  border : 1px solid blue;
}

div#container.up>div:first-child {
  transform: translateY(-25%);
}

div#container.down>div:last-child {
  transform: translateY(25%);
}