CSS regarding height and scrolling-CodePudding

Trying to learn CSS and Tailwind in general and struggling with height.

I made a code pen above based off this https://tailwindcomponents.com/component/new-telegram-web-clone

If I were to scroll to the bottom on the list of chats, the last card only shows up partially. I would like it to show completely.

Based on what I can interpret, the list of chats section is set to 100vh, as a result it overflows and was configured to hide it. I'm not sure how to get it to fit the given height.

What I'm really confused is, the vertical scrollbar is meant to deal with content that cannot fit, but now the vertical scrollbar itself cannot fit in the given space.

Appreciate any help. Thank you!

CodePudding user response：

display: flex; properly has been overrided by display:block properly for this <div> element:


 <!-- left -->
        <div 
            style="width: 24rem">

try to add class left-side-wrap to this <div>


 <!-- left -->
        <div 
            style="width: 24rem">

and after that add this CSS code to make sure that <div> will have display:flex; properly:


body .left-side-wrap{
  display: flex;  
}

Here you can check an updated Js fiddle: https://jsfiddle.net/j1rbv7un/