0

I have a CSS grid layout with a fixed header and footer, and in-between a scrollable content area. See my working prototype: https://codepen.io/tomsoderlund/pen/ZEOzOdX

When implementing this in my live app, I’m struggling to prevent the scrollable area to overflow, without resorting to using height/max-height.

See this JSFiddle with the problem: https://jsfiddle.net/tomsoderlund/zfyp76kb/

.messagelist is the scrollable area. It’s height should be set by its parent .messagelist-and-form which has grid-template-rows: 1fr auto;. The header and footer should always be visible, but .messagelist expands too much.

Update

Even this nested CSS Grid prototype works fine: https://codepen.io/tomsoderlund/pen/xxOKWWP

Update 2: DOM hierarchy explained

  • body (absolute, top/bottom: 0)
  • .frames (height: 100%)
  • main (height: 100%)
  • article.conversation (height: 100%)
  • .messages-and-quote (height: 100%)
  • .messagelist-and-form (height: 100%)
  • .messagelist (height: 100% adding an absolute height here enables proper scrolling)
Tom Söderlund
  • 4,743
  • 4
  • 45
  • 67
  • 1
    overflow always need a fixed height or max-height .. the default behavior is to fit the content so you have to restrict the height if you want a scrollbar. – Temani Afif Oct 05 '20 at 21:26
  • @Temani But check my prototype, it’s not using max-height/height. – Tom Söderlund Oct 06 '20 at 05:06
  • if you talk about the codepen, there is a height:100%. IF you talk about the JS there is no height/max-height and no scrollbar too – Temani Afif Oct 06 '20 at 08:32
  • @TemaniAfif There's a height `100%` on the `body` and the container `.layout` in the prototype, is this what you mean? There’s no height on the `article`. – Tom Söderlund Oct 06 '20 at 08:35
  • yes, the one on the .layout is enough. The article has its height defined with the template-row which is also inside .layout – Temani Afif Oct 06 '20 at 08:37
  • @TemaniAfif See my updated post with DOM hierarchy. All the nodes have `height: 100%` just as in the prototype. What is the difference? I added height:100% to `.messagelist` but it makes no difference. – Tom Söderlund Oct 06 '20 at 08:45
  • You are missing min-height:0 to `messages-and-quote` and its inner div – Temani Afif Oct 06 '20 at 08:49
  • @TemaniAfif Thank you! Adding `min-height: 0;` to `.messages-and-quote` and child `.messagelist-and-form` fixed the problem. Apparently related: https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items – Tom Söderlund Oct 06 '20 at 08:59

0 Answers0