CODEWITHSUNDEEP
cssheighttailwind-css
bilogic
bilogic

Reputation: 667

CSS regarding height and scrolling

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

https://jsfiddle.net/7f6cd1bx/

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!

Upvotes: 0

Views: 114

Answers (1)

Andrew T.
Andrew T.

Reputation: 80

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


 <!-- left -->
        <div class="relative flex flex-col hidden h-full bg-white border-r border-gray-300 shadow-xl md:block transform transition-all duration-500 ease-in-out"
            style="width: 24rem">

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


 <!-- left -->
        <div class="left-side-wrap relative flex flex-col hidden h-full bg-white border-r border-gray-300 shadow-xl md:block transform transition-all duration-500 ease-in-out"
            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/

Upvotes: 1

Related Questions