1

I'm trying to build a chat with dynamic content, the sizes of the images on each div are variable in size and once loaded in tend to push the elements below it down.

I thought a good solution to this problem would be to have the div expand in size upwards so it pushes the elements above it upwards so at least the layout shift happens mostly above the viewport.

I have tried making a flexbox with flex-direction: column; justify-content: flex-end, it works initially but once I get to the top it doesn't make the div overflow (scroll) with overflow:scroll.

.wrapper {
  height: 500px;
  width: 500px;
  overflow: scroll;
}

.container {
  height: 100%;
  padding: 30px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

codepen here https://codepen.io/BitRain/pen/MWGxzXN

enter image description here

This is what I'm trying to achieve, the items above get pushed up and cause the div to overflow: scroll and continue to be pushed upwards. This is just display: block and the whole container rotated 180deg

enter image description here

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
dashb
  • 119
  • 9
  • use `
    ` instead of `
    ` and style it with CSS `flex` or flexbox. Fix the height of the section. Use `flex-direction: column;`.
     – Ronnie Royston Oct 16 '22 at 00:08

0 Answers0