如何使用css底部对齐div？

Question

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

这是我的代码

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

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

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

但预期的输出应该向上增长

预期输出

有没有办法在 css 网格中使用 minmaxval 或自动调整或自动填充来向上增长 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;
}