Html Question posted in
Some basic documentation can be found here.

Html – Overflow not working on card content in page

I’m having problems with overflow in CSS. Feel free to link another StackOverflow question if you think it answers this, but I have done my due diligence and combed through many questions looking for a solution. The code and problem can be found on CodePen here.

Here’s a simplified view of my card – I want only the main content of the card to scroll when the card is squished, so that it looks something like this:
enter image description here

Instead the card looks like this:

enter image description here

I don’t know what I’m doing wrong. I’m specifying the heights of each element so that it knows what it’s max size should be before overflow rules need to come into it. But somehow it still overflows.

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
}

.page {
  align-items: center;
  background-color: orange;
  display: flex;
  gap: 1rem;
  height: 100%;
  justify-content: center;
  padding: 2rem;
  width: 100%;
}

.aside {
  background-color: blue;
  height: 2rem;
  width: 2rem;
}

.card {
  background-color: blue;
  max-height: 100%;
  padding: 1rem;
  width: 16rem;
}

.card-content {
  background-color: pink;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-body {
  background-color: green;
  flex-grow: 1;
  overflow-y: auto;
}
<div class="page">
  <div class="aside"></div>
  <div class="card">
    <div class="card-content">
      <div class="card-title">TITLE</div>
      <div class="card-body">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus. Tellus rutrum tellus pellentesque eu tincidunt. Molestie a iaculis
          at erat pellentesque adipiscing commodo elit at. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl vel. Vulputate mi sit amet mauris commodo quis imperdiet. Dui id ornare arcu odio ut sem nulla. Lectus sit amet est placerat in egestas
          erat imperdiet sed. Quis eleifend quam adipiscing vitae. Egestas sed sed risus pretium. Nulla pellentesque dignissim enim sit. Rhoncus urna neque viverra justo nec. Viverra vitae congue eu consequat ac felis donec. Quis lectus nulla at volutpat.
          Orci porta non pulvinar neque laoreet suspendisse. </p>
       
        

      </div>
      <div class="card-footer">FOOTER</div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    You have to specify the height of the .card-content with something more precise than 100%. Here is an article that talks about the unpredictability of using percentages of percentages. One quote here I think applies is:

    Interestingly, when the parent element doesn’t have a defined height, the browser will keep going up level by level until it finds a concrete value that it can work with. If it makes it all the way up to the without finding anything, the browser will default to the screen height, giving your element an equivalent height.

    * { box-sizing: border-box; }

body {
    height: 100vh;
    margin: 0;
}

.page {
    align-items: center;
    background-color: orange;
    display: flex;
    gap: 1rem;
    height: 100%;
    justify-content: center;
    padding: 2rem;
    width: 100%;
}

.aside {
    background-color: blue;
    height: 2rem;
    width: 2rem;
}

.card {
    background-color: blue;
    max-height: 100%;
    padding: 1rem;
    width: 16rem;
}

.card-content {
    background-color: pink;
    display: flex;
    flex-direction: column;
    height: 45vh;
}

.card-body {
    background-color: green;
    flex-grow: 1;
    overflow-y: auto;
}
    <div class="page">
    <div class="aside"></div>
    <div class="card">
        <div class="card-content">
            <div class="card-title">TITLE</div>
            <div class="card-body">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus. Tellus rutrum tellus pellentesque eu tincidunt. Molestie a iaculis at erat pellentesque adipiscing commodo elit at. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl vel. Vulputate mi sit amet mauris commodo quis imperdiet. Dui id ornare arcu odio ut sem nulla. Lectus sit amet est placerat in egestas erat imperdiet sed. Quis eleifend quam adipiscing vitae. Egestas sed sed risus pretium. Nulla pellentesque dignissim enim sit. Rhoncus urna neque viverra justo nec. Viverra vitae congue eu consequat ac felis donec. Quis lectus nulla at volutpat. Orci porta non pulvinar neque laoreet suspendisse. </p>
              <p>
Tempor orci dapibus ultrices in iaculis nunc sed augue. Integer quis auctor elit sed vulputate mi sit amet. Vitae aliquet nec ullamcorper sit amet. Gravida quis blandit turpis cursus in hac habitasse platea. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id. Turpis cursus in hac habitasse platea dictumst quisque sagittis. Ornare lectus sit amet est placerat in egestas. Non pulvinar neque laoreet suspendisse. Suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Ac tortor vitae purus faucibus ornare suspendisse. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Pharetra vel turpis nunc eget lorem dolor. Amet risus nullam eget felis eget nunc lobortis mattis aliquam. Proin sed libero enim sed faucibus turpis. Adipiscing elit pellentesque habitant morbi tristique senectus et. </p>
              <p>
Diam maecenas sed enim ut. Porttitor leo a diam sollicitudin tempor id eu. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Sed sed risus pretium quam. Quis enim lobortis scelerisque fermentum. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Gravida rutrum quisque non tellus orci ac auctor augue. Aliquet bibendum enim facilisis gravida neque convallis a cras. Enim ut sem viverra aliquet. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Consectetur a erat nam at lectus urna duis convallis. </p>
              <p>
Habitant morbi tristique senectus et netus et malesuada fames ac. Pellentesque habitant morbi tristique senectus et netus et malesuada. Sed elementum tempus egestas sed. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere. Purus semper eget duis at. Molestie a iaculis at erat pellentesque adipiscing commodo elit. Commodo ullamcorper a lacus vestibulum. Convallis posuere morbi leo urna molestie at elementum eu. Dui faucibus in ornare quam viverra orci. Mollis nunc sed id semper risus in. Et pharetra pharetra massa massa ultricies mi quis hendrerit. </p>
              <p>
Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Malesuada proin libero nunc consequat interdum varius. Urna neque viverra justo nec ultrices dui. In vitae turpis massa sed elementum tempus. Lacinia at quis risus sed. Scelerisque felis imperdiet proin fermentum leo vel orci. Tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sit amet porttitor eget dolor morbi. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Mi ipsum faucibus vitae aliquet nec ullamcorper. Aliquam vestibulum morbi blandit cursus risus at ultrices. Bibendum at varius vel pharetra. Convallis convallis tellus id interdum velit. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Nulla posuere sollicitudin aliquam ultrices sagittis orci. </p>
            </div>
            <div class="card-footer">FOOTER</div>
        </div>
    </div>
</div>
    Login or Signup to reply.
  2. 0 
     .card {
background-color: blue;
// change 100% to 100vh
max-height: 100vh;
padding: 1rem;
width: 16rem;

    }

    the 100% sometimes makes issues like these but using 100vh should solve it since its max-height

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search