Text is flowing outside of div with overflow + positioning div at the bottom of parent div (with overflow)

I'm having a problem with my code.

my goal is to have a scrollable div with two other divs inside it.

one div has text,
the other has a date.

I'm facing two problems:

1. the contents of the text spill out from the top of the box like so.

2. the date does not stick to the bottom of the parent div.
   

My CSS goes as follow:

#taskContainer>div {
position: relative;
width: 175px;
height: 240px;
display: inline-block;
background-image: url('/assets/notebg.png');
margin: 15px;
animation: Fadein 2s;
overflow: auto;}

.taskDateAndTime {
position: absolute;
left: 0;
bottom: 0;
padding-left: 4px;}

.taskInfo {
padding-top: 15px;
word-break: break-all;
padding-bottom: 15px;}

The HTML part (written inside a JS function and HTML page):

JS:

        let div = `
    <div id="task${index}">
        <div class='taskInfo'>${taskInfo.task}</div>
        <br>
        <div class='innerDateTime'>
            <div class='taskDateAndTime'>${taskInfo.date}<br>${taskInfo.time}</div>
        </div>
    </div>`;
    taskContainer.innerHTML += div;

HTML:

<div id="taskContainer"></div>

could really use some help with overflow and positioning here.

Thanks in advance.

For the position you can rely on sticky and for the overflow, you need to adjust the height to match the size of the image of use background-size:100% 100%

Here is a working example for the sticky behavior

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.box {
  display:inline-flex;
  flex-direction:column;
  width:150px;
  height:200px;
  border:1px solid;
  overflow:auto;
}
.box div:last-child {
  margin-top:auto;
  position:sticky;
  bottom:0;
  background:#fff;
  padding:2px;
}

<!-- language: lang-html -->

<div class="box">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat et metus auctor imperdiet. Nam ac mattis elit, at imperdiet mi. Nam gravida ullamcorper blandit. </div>
<div>10/12/2020</div>
</div>

<div class="box">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat et metus auctor imperdiet. Nam ac mattis elit, at imperdiet mi. Nam gravida ullamcorper blandit. at imperdiet mi. Nam gravida ullamcorper blandit. at imperdiet mi. Nam gravida ullamcorper blandit. </div>
<div>10/12/2020</div>
</div>

<div class="box">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat et metus auctor imperdiet. Nam ac mattis elit, at imperdiet mi. Nam gravida ullamcorper blandit. at imperdiet mi. Nam gravida ullamcorper blandit. at imperdiet mi. Nam gravida ullamcorper blandit. Nam gravida ullamcorper blandit. at imperdiet mi. Nam gravida ullamcorper blandit.</div>
<div>10/12/2020</div>
</div>

<!-- end snippet -->

Can you change overflow to overflow:scroll; and also add a padding of 15px to the task container.

Also I feel if there are multiple instances of taskContainer it should be a class not an ID.