如何使用 css 底部对齐 div？

Question

我有 div 有一些文本内容。我想让 div 对齐 bottom 。或者换句话说，当文本增长时它的底部永远不会改变。

这是我的代码

https://codepen.io/naveen-1234/pen/ExXNRbZ

当我有小文字时它看起来不错

但是当我的文本增加时它会像这样溢出容器

但预期产出应该向上增长

预期输出

在 css 网格中有什么方法可以使用 minmaxval 或 auto-fit 或自动填充以向上 div 增长 .?

.abc{
  display:grid;
    grid-template-columns: repeat(12,6.697%);
    grid-template-rows: 18px repeat(4, 1fr);
   border:1px solid green;
  height:320px
}
.one{
  grid-column: 2/5;
   grid-row: 3/5;
    border:1px solid;
}
.two {
  grid-row: 1/5;
    border:1px solid #ee0;
}


<div class="abc">
  
  <div class="one">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates culpa iste facaudantium Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates culpa iste facaudantium
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates culpa iste facaudantium
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates culpa iste facaudantium</p>
  </div>
  <div class="two">
    tooo
  </div>
</div>

Answer 1

添加此更改：

.abc{
  height: auto;
}
.one{
  grid-row: 1/5;
  display: flex;
  align-items: flex-end;
}

Answer 2

我想这就是您要找的。据我了解，容器的要求是从待办事项容器的末尾开始，然后向上增长，这个css满足要求

.abc{
  display:grid;
height:auto;
    grid-template-columns: repeat(12,6.697%);
    grid-template-rows: 18px repeat(4, 1fr);
   border:1px solid green;
  /* height:320px */
}
.one{
  grid-column: 2/5;

  grid-row-start: 4;
  grid-auto-flow: row;
    border:1px solid;
  display: flex;
  height: fit-content;
  background-color:red;
  justify-content: center;

}
.two {
  grid-row: 1/5;
    border:1px solid #ee0;
}