I have created a sidebar and I don’t want the sidebar to take more than height:100vh of the canvas as you can see there is info data after the image so if the data is way more then it overflows and makes the sidebar above 100vh which I don’t want.
So what I want is if the data is more and it is making the sidebar go above 100vh then the info data section becomes scrollable with overflow: scroll (as it is currently now) in case it doesn’t overflow and goes on a big screen then the overflow: scroll does not have to work and the empty scroll bar has to disappear
body{
padding:0;
margin:0;
font-family: arial;
}
img{
width: 100px;
height:100px;
object-fit:cover;
border-radius:500px
}
.container{
display: flex;
flex-direction: column;
width: 200px;
background: #e1e1e1;
height:100vh;
padding:20px 10px;
}
.info{
height:500px;
overflow:scroll
}<div class="container">
<div class="some-stuff">
<img src="https://images.pexels.com/photos/13538314/pexels-photo-13538314.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" alt="">
<hr>
</div>
<!-- info Data -->
<h2>info Data section</h2>
<div class="info">
<div class="stud-dta-container">
<div class="stud-dta bd-btm-ext-grey mt-2">
<span class="fs-7">Email Address:</span>
<p class="mt-1 fs-6-6 mb-2">[email protected] </p>
</div>
<div class="stud-dta bd-btm-ext-grey mt-2">
<span class="fs-7">Test::</span>
<p class="mt-1 fs-6-6 mb-2">00 0000 0000 000</p>
</div>
<div class="stud-dta bd-btm-ext-grey mt-2">
<span class="fs-7">Test::</span>
<p class="mt-1 fs-6-6 mb-2">Test Data</p>
</div>
<div class="stud-dta bd-btm-ext-grey mt-2">
<span class="fs-7">Test::</span>
<p class="mt-1 fs-6-6 mb-2">Test Data</p>
</div>
<div class="stud-dta bd-btm-ext-grey mt-2">
<span class="fs-7">Test::</span>
<p class="mt-1 fs-6-6 mb-2">Test Data</p>
</div>
<div class="stud-dta bd-btm-ext-grey mt-2">
<span class="fs-7">Test::</span>
<p class="mt-1 fs-6-6 mb-2">Test Data</p>
</div>
<div class="stud-dta bd-btm-ext-grey mt-2">
<span class="fs-7">Test::</span>
<p class="mt-1 fs-6-6 mb-2">Test Data</p>
</div>
<div class="stud-dta bd-btm-ext-grey mt-2">
<span class="fs-7">Test::</span>
<p class="mt-1 fs-6-6 mb-2">Test Data</p>
</div>
</div>
</div>
</div>
3
Answers
With flex, you can use flex-grow(flex-shrink & flex-basis), the browser will do the calculation for you. Then only the parent is to be sized. Here you set an height to 100vh, but also add a padding. To include the padding, you need to reset the the box-sizing propertie.
Finally, a reset on box-sizing on the flex parent , keeps in the viewport, then , info are to be told to grow (as much avalaible space) and overflow if that is not enough.
possible CSS fix:
I suggest you to slightly rearrange html content (in order to have your tag inside the info section) like this:
Then you only need to use a known-height "some-suff" div and set the heights of the other divs:
Working example: https://jsfiddle.net/3Lyz1wut/
You’re nearly there, some tweaks that we’ll make should get you on the right track.
box-sizingproperty that "sets how the total width and height of an element is calculated" (source: MDN) which has a very handy value,border-boxthat "tells the browser to account for any border and padding in the values you specify for an element’s width and height" (source: MDN) which will allow yourdiv.containerto NOT exceed100vheven with the set padding.div.info) take the rest of the space and optionally, or rather automatically, adds vertical scrollbars when needed we will, thanks to thedisplay: flexset ondiv.info‘s parent (div.container), apply aflex-growof1that will allowdiv.infoto take the remaining vertical space (thanks toflex-direction: columnset ondiv.container), without exceeding the100vhheight on the parent.overflow-yset toautoondiv.infothat will allow that element to have a vertical scroll when needed without exceeding the parent’s explicitly set100vhvalue.Here’s a live demo of what’s being said: