Add this changes:

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

I guess this is what you are looking for. as far as my understanding the requirements are for the container to start from the end of the todo container and grow upwards, this css fulfills the requirements

.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;
}

I have div which have some text content. I want to make that div align to bottom . or in other words it bottom never change when text grow .

here is my code

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

when I have small text it looks good

but when my text increase it overflow the container like this

but the expected output is it should grow in upward direction

Expected output

is there any way in css grid using minmaxval or auto-fit or auto fill to grow div in upward direction .?

.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>