how to make to make the div to take 100% of rest of the space?-CodePudding

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 >
  <div >
    <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 >
    <div >
      <div >
        <span >Email Address:</span>
        <p >[email protected] </p>
      </div>
      <div >
        <span >Test::</span>
        <p >00 0000 0000 000</p>
      </div>
      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>

      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>

      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>

      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>
      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>
        <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>

    </div>
  </div>
</div>

CodePudding user response：

You're nearly there, some tweaks that we'll make should get you on the right track.

First things first, a good practice is to use the box-sizing property that "sets how the total width and height of an element is calculated" ^{(source: MDN)} which has a very handy value, border-box that "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 your div.container to NOT exceed 100vh even with the set padding.
And now to make the info section (div.info) take the rest of the space and optionally, or rather automatically, adds vertical scrollbars when needed we will, thanks to the display: flex set on div.info's parent (div.container), apply a flex-grow of 1 that will allow div.info to take the remaining vertical space (thanks to flex-direction: column set on div.container), without exceeding the 100vh height on the parent.
And finally, we'll use overflow-y set to auto on div.info that will allow that element to have a vertical scroll when needed without exceeding the parent's explicitly set 100vh value.

Here's a live demo of what's being said:

/** apply the border-box for the box-sizing property (always set it glabally so all the elemnts inherit that value for better calculations and layout behaviour predectibility) */

* {
  box-sizing: border-box
}

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;
  /** thanks to the above box-sizing rule, the padding will be substructed from the height and width of the elemnt thus the element's height won't exceed 100vh */
}

.info {
  /** removed the explicitly set height as flex-grow will do the trick for us */
  flex-grow: 1;
  /** allow scrolling when needed */
  overflow-y: auto;
}

<div >
  <div >
    <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 >
    <div >
      <div >
        <span >Email Address:</span>
        <p >[email protected] </p>
      </div>
      <div >
        <span >Test::</span>
        <p >00 0000 0000 000</p>
      </div>
      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>
      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>
      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>
      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>
      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>
      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>
    </div>
  </div>
</div>

I recommend moving the h2 element and put it inside the div.info for a better result when the screen is too small (like the snippet's result section here on SO).

CodePudding user response：

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:

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;
  box-sizing:border-box;
}

.info{
  flex-grow:1;
  overflow:auto;
}

<div >
  <div >
    <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 >
    <div >
      <div >
        <span >Email Address:</span>
        <p >[email protected] </p>
      </div>
      <div >
        <span >Test::</span>
        <p >00 0000 0000 000</p>
      </div>
      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>

      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>

      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>

      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>
      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>
        <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>

    </div>
  </div>
</div>

CodePudding user response：

I suggest you to slightly rearrange html content (in order to have your tag inside the info section) like this:

<div >
  <h2>info Data section</h2>
  <div >
    ...
  </div>
  ...
</div>

Then you only need to use a known-height "some-suff" div and set the heights of the other divs:

.container{
  display: fixed;
  width: 200px;
  padding: 20px 10px; /*** verical-padding = 20px ***/
  height: calc(100vh - 40px); /*** 40px = 2*verical-padding ***/
  top: 0;
}
.some-stuff { height:160px; }
.info {
  height:calc(100% - 160px);
  overflow:scroll;
}

CodePudding user response：

Try this:

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:0px 10px;
}

.info{
  height:500px;
  overflow:scroll;
}

.some-stuff{
  padding-top: 20px;
}

<div >
  <div >
    <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 >
    <div >
      <div >
        <span >Email Address:</span>
        <p >[email protected] </p>
      </div>
      <div >
        <span >Test::</span>
        <p >00 0000 0000 000</p>
      </div>
      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>

      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>

      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>

      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>
      <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>
        <div >
        <span >Test::</span>
        <p >Test Data</p>
      </div>

    </div>
  </div>
</div>