I have an issue that has been bugging me for hours and I just can figure out how to fix it.
I have created a card (similar to the ones in Bootstrap). I have given it a fixed height. That's all fine.
However, inside the card. I have a div, with a class called "transaction-lines". In it, you have several individual lines inside the div. There could be 1-50.
What I am trying to do is to get the overflow-y working, so that if the height of the "transaction-lines" div is bigger than the fixed height of the card, it will trigger the scroll mode (overflow-y: scroll).
If you look at it now, it doesn't trigger scroll mode correctly. If you remove a few comment lines, from the fiddle, it will look normal.
https://codepen.io/DocRow10/pen/MWQPLzo
<div class="test-card style-one main-details" style="height: 34vh;">
<div class="card-main-content">
<div class="card-main-content-container">
<div class="content-container">
<section class="tab-section">
<div class="transaction-lines">
<div class="line">
<div class="indicator">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
Test Comment Line
</div>
</div>
<div class="line">
<div class="indicator">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
Test Comment Line
</div>
</div>
<div class="line">
<div class="indicator">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
Test Comment Line
</div>
</div>
<div class="line">
<div class="indicator">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
Test Comment Line
</div>
</div>
<div class="line">
<div class="indicator">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
Test Comment Line
</div>
</div>
<div class="line">
<div class="indicator">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
Test Comment Line
</div>
</div>
<div class="line">
<div class="indicator">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
Test Comment Line
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="card-footer-container">
<div class="card-footer">
<button class="primary-button">Button</button>
<button class="primary-button">Button</button><button class="primary-button">Button</button><button
class="primary-button">Button</button><button class="primary-button">Button</button><button
class="primary-button">Button</button><button class="primary-button">Button</button>
</div>
</div>
</div>
Any help would be appreciated.
Thanks.
I've figured this out myself, partially thanks to @mdurchholz above, but it was the .card-main-content itself that was overflowing, not the .transaction-lines. The child element (.card-main-content) to the parent you've set the height on (.test-card), is the one that needs the overflow property and not one of it's children.
To resolve this, I had to make the .content-container a direct child of the .test-card and then apply the overflow proprety there. Added flex: 1 to the .content-container, so it would stretch the remaining vertical space of the .test-card. If you have a lot of content in the .content-container, scrolling will now activate, without moving any of the other content, which is exactly what I needed.
Flexbox wasn't relevant to this issue.
Thanks and I hope this is helpful to someone in the future.