KPC
Kevin Powell - Community•3w ago
empty

overflow-y auto does not work

Hi everyone, I'm trying to make the content scrollable using overflow-y-auto, but it's not working as expected. Here's my layout structure 
<div className="grid h-dvh grid-rows-[auto_1fr] overflow-hidden">
        <Header />
        <div className="grid grid-flow-col grid-cols-[auto_1fr] grid-rows-1">
          <Sidebar />
          <div className="overflow-y-auto">{children}</div>
        </div>
</div>
<div className="grid h-dvh grid-rows-[auto_1fr] overflow-hidden">
        <Header />
        <div className="grid grid-flow-col grid-cols-[auto_1fr] grid-rows-1">
          <Sidebar />
          <div className="overflow-y-auto">{children}</div>
        </div>
</div>
4 Replies
empty
emptyOP•3w ago
Can anyone help me?
Chris Bolson
Chris Bolson•3w ago
Your content element (with {children}) doesn't have a defined height so it will just get taller according to the content, eventually being clipped/hidden by the parent overflow hidden. For overflow-y: auto to work the browser needs a specific height so as to decide whether to show the scroll bar or not. On your top parent element, try swapping out : grid-rows-[auto_1fr] for
grid-rows-[auto_100%] This would normally cause a scroll bar as "auto" (height of header) + 100% > 100dvh however, as you have defined overflow-hidden on the parent element, this is negated. Why does 1fr not work? fr calculation is deferred until all other elements are sized so the exact value is not available when the browser decides whether it needs a scroll bar or not.
empty
emptyOP•2w ago
It works, but the content is still clipped and not fully visible. Do you know why?
No description
empty
emptyOP•2w ago
Here’s the updated version based on your help 
 <div className="grid h-dvh grid-rows-[auto_100%] overflow-hidden">
      <Header />
      <div className="grid grid-flow-col grid-cols-[auto_1fr]">
        <Sidebar />
        <div className="overflow-y-auto p-4 sm:p-6">{children}</div>
      </div>
 </div>
 <div className="grid h-dvh grid-rows-[auto_100%] overflow-hidden">
      <Header />
      <div className="grid grid-flow-col grid-cols-[auto_1fr]">
        <Sidebar />
        <div className="overflow-y-auto p-4 sm:p-6">{children}</div>
      </div>
 </div>
Ah, I found that this version works as expected. I moved overflow-hidden to the inner <div> and removed sticky from the <Header />. Not sure exactly why it works, but if you have any feedback, I’d really appreciate it! 
  <div className="grid h-dvh grid-rows-[auto_1fr]">
      <Header />
      <div className="grid grid-flow-col grid-cols-[auto_1fr] overflow-hidden">
        <Sidebar />
        <div className="overflow-y-auto p-4 sm:p-6">{children}</div>
      </div>
  </div>
  <div className="grid h-dvh grid-rows-[auto_1fr]">
      <Header />
      <div className="grid grid-flow-col grid-cols-[auto_1fr] overflow-hidden">
        <Sidebar />
        <div className="overflow-y-auto p-4 sm:p-6">{children}</div>
      </div>
  </div>

Did you find this page helpful?