CODEWITHSUNDEEP
htmlcssreactjsflexboxreact-bootstrap
Manuel
Manuel

Reputation: 208

Flexbox scrollable bootstrap card (vertically)

I have troubles to create cards with scrollable content, if they exceed the screen height. I use a flexbox to force main to fill out the entire vertical space which pushes the footer to the botton of the page. You may remove a part of the Lorem Ipsum text to see how it works. To format all cards, i use a grid with a breakpoint (breakpoint is not included in the example).

https://codesandbox.io/s/fervent-browser-bjek0?file=/src/App.js

If possible, i don't want to check the screen size with javascript but use css instead. I don't need IE 11 support.

Upvotes: 0

Views: 1376

Answers (1)

ates_irem
ates_irem

Reputation: 286

Hello :) The best thing that I can think of is this; You can control the card height with max-height.

.card {
  overflow-y: scroll;
  max-height: 80vh;
  scroll-behavior: smooth;
}
.card-body {
  position: relative;
}
.card-header {
  position: sticky;
  top: 0;
  background-color: #f8f9fa;
  z-index: 1;
}
.card-footer {
  position: sticky;
  bottom: 0;
  background-color: #f8f9fa;
  z-index: 1;
}

Upvotes: 1

Related Questions