Make the div scrollable based on the content-CodePudding

The requirement is to make the div with class ".container" scrollable. The other divs should render as per the specified height. At present this content creates a scroll at body level. Also flex display related answer is preferred over display as grid ones.

.box .row {
  border: 1px dotted grey;
}

<head>

</head>

<body>
  <div >
    <div  style="height:200px">
      <div>header</div>
      <span>sized to content</span>
    </div>
    <div >
      <div>
        <span style="height:50px">content</span> (fills remaining space)
        <div >
          <div style="width:100%;height:700px;background-color:green"> </div>
        </div>
      </div>
    </div>
  </div>
</body>

CodePudding user response：

Have you tried adding the overflow-y: auto; to your container?

CodePudding user response：

You have to nest an element with height: 100%; into an element with a fixed or restricted height. Then you can set overflow-y: scroll; on the element with the height: 100%; which will contain all of your content.

I added some content to demonstrate the behavior.

.box .row {
  border: 1px dotted grey;
}

.container {
  height: 700px;
  background-color: green
}

.container>div {
  width: 100%;
  height: 100%;
  border: solid 3px red;
  overflow-y: scroll;
}

<head>

</head>

<body>
  <div >
    <div  style="height:200px">
      <div>header</div>
      <span>sized to content</span>
    </div>
    <div >
      <div>
        <span style="height:50px">content</span> (fills remaining space)
        <div >
          <div>NOW<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>WE<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>CAN<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>SCROLL<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
        </div>
      </div>
    </div>
  </div>
</body>

CodePudding user response：

You have to set height to your parent container. Px or any property. Then set overflow auto