1

This is not far off from the final product, but a chat window is easier to show.

https://i.stack.imgur.com/odeMS.png

The dynamic text on bottom is input via another input with javascript, and as it's inputted I need the div to grow upward, and also push the image above it with it as it grows. Later I'll be able to replace the above image with text, which would make this a lot easier, but for now it has to be an image, and I'm struggling to anchor this

text parent div within it's wrapper. The wrapper is in the place it needs to be for me to be able to basically push this parent div to with 0 padding and it will be in the right spot.

I know this image is ridiculous but I didn't know of a better way to explain. hopefully it gets the point across.

I've tried all variations of position: relative things and positioning properties that it allows for, but I've failed miserably. As far as I know, I can't do anything absolute because then it won't be able to push up the above image....someone please correct me if i'm wrong.

Thanks in advance.

neonfontana
  • 59
  • 5
  • 1
    Please put enough code into your question to demonstrate the problem See https://stackoverflow.com/help/minimal-reproducible-example – A Haworth Mar 25 '22 at 15:05

1 Answers1

1

If I'm understanding the question, I would probably use flex:

display: flex;
flex-direction: column-reverse;
justify-content: flex-end;

EDIT:

According to this post https://stackoverflow.com/a/44051405/14121581, you should stay scrolled to the bottom if you use flex-direction: column-reverse instead of column.

chase
  • 317
  • 2
  • 9