Why is the min-height not overriding the height? - css

Question

this is my first post on stack overflow so I hope I'm doing it right, but I'm having this css problem on the home page of a website I'm creating where it has different sections and I want to make it so that the height of the sections are 80vh but will have a min-height of fit-content so that the content is never cut off if it exceeds 80vh height. However, it seems as if the min-height is not overriding the height and the section height is not big enough to fit the content.
here's the html and css for the section it is not working with:
<section class="home-section" id="home-shopcontact">
<div id="home-shopcontact-container">
<div id="home-shop" class="home-shopcontact-card">
<div class="home-shopcontact-card-content content-div">
<h1>See Something You Like?</h1>
<ul>
<li>Prints available for A5 to A1.</li>
<li>Optional bespoke framing.</li>
<li>Original handmade works.</li>
<li>Commissions.</li>
</ul>
<form action="shop.html">
<button class="pink-button">SHOP</button>
</form>
</div>
</div>
<div id="home-contact" class="home-shopcontact-card content-div">
<div class="home-shopcontact-card-content content-div">
<h1>Get in Touch.</h1>
<ul>
<li>Commission work.</li>
<li>General enquiries.</li>
<li>Any related questions.</li>
</ul>
<form action="contact.html">
<button class="pink-button">CONTACT ME</button>
</form>
</div>
</div>
</div>
</section>
here's the css:
.home-section {
border: 6px solid red;
min-height: fit-content;
height: 720px;
}
#home-shopcontact-container {
border: 6px solid blue;
display: flex;
gap: 3.125rem; /* 50px */
justify-content: center;
flex-wrap: wrap; /* when the cards are too big on the screen to both fit on the same line, move it underneath */
padding: 3rem; /* so it doesnt touch the edge of the screen so you can see the cards clearly */
}
.home-shopcontact-card {
position: relative; /* so I can position the link buttons relative to the card */
box-sizing: border-box; /* so the padding doesnt affect the size of the cards */
border: 1.5px solid var(--theme-grey);
min-width: fit-content; /* make sure that the cards have at least enough width to display the content */
min-height: fit-content;
width: 34.375rem; /* 550px */
height: 42.5rem; /* 680px */
border-radius: 50px;
padding: 2.8125rem 0 2.8125rem 0; /* 45px padding at the top and bottom of the card */
overflow: hidden; /* done this to make the transparent background not overflow with the rounded corners */
}
here's what it comes out looking like:
(hopefully you all can see that)
the red border shows the parenting section div and the blue border shows the content container div. My real question boils down to - why is the min-height not ensuring that the height of the red bordered section div is at least big enough to fit the content? You can see the blue bordered content div overflow underneath.
Any help would be greatly appreciated, sorry if I missed important details and if I have please let me know and i'll get it for you. Thanks! :D

Answer 1

If I`ve undestanded correctly, you want to create a section with height: 80vh, but if the content of the section is bigger than 80vh the section must to grow. Is this? If Yes, you must to do this in your section: height: fit-content; min-height: 80vh