CODEWITHSUNDEEP
htmlcss
Iamkky
Iamkky

Reputation: 13

How to make a list fit inside the parent div using scrollbar

I can't make a list fit inside the parent div (which is defined to be 100vh). The list overflows the div. Tried to use flex and grid with no success. I don't want to use fixed size in pixel as the page has to resize with browser window.

The following codepen shows to problem. I appreciate any help

https://codepen.io/iamkky/pen/ExavYer

html, body {
  margin: 0;
  padding: 0;
}

div {
  border: 1px solid #5050ff;
}

body {
  font-size: xxx-large;
}

#main{
  height: 100vh;        
}

#list {
}
<div id="main">
  <div id="title">title<div>
    <div id="list">
      <ul>
        <li>name 1</li>
        <li>name 2</li>
        <li>name 3</li>
        <li>name 4</li>
        <li>name 5</li>
        <li>name 6</li>
        <li>name 7</li>
        <li>name 8</li>
        <li>name 9</li>
        <li>name 10</li>
        <li>name 11</li>
        <li>name 12</li>
        <li>name 13</li>
        <li>name 14</li>
        <li>name 15</li>
        <li>name 16</li>
        <li>name 17</li>
        <li>name 18</li>
        <li>name 19</li>
        <li>name 20</li>
        <li>name 21</li>
      </ul>  
    </div>
<div>

Upvotes: 1

Views: 731

Answers (4)

Hardik Chaudhary
Hardik Chaudhary

Reputation: 1228

I created a demo for you with flexbox. Hope it can help!

*{
  box-sizing:border-box;
}

html, body {
 margin: 0;
 padding: 0;
}

div {
 border: 1px solid #5050ff;
}

body {
  font-size: xxx-large;
}

#main{
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#list {
  overflow: auto;
}
<div id="main">
    <div id="title">title</div>
    <div id="list">
      <ul>
        <li>name 1</li>
        <li>name 2</li>
        <li>name 3</li>
        <li>name 4</li>
        <li>name 5</li>
        <li>name 6</li>
        <li>name 7</li>
        <li>name 8</li>
        <li>name 9</li>
        <li>name 10</li>
        <li>name 11</li>
        <li>name 12</li>
        <li>name 13</li>
        <li>name 14</li>
        <li>name 15</li>
        <li>name 16</li>
        <li>name 17</li>
        <li>name 18</li>
        <li>name 19</li>
        <li>name 20</li>
        <li>name 21</li>
      </ul>  
    </div>
  </div>

Upvotes: 2

Gaurav Singh
Gaurav Singh

Reputation: 369

Just add overflow: scroll in main css like this 

#main{
  height: 100vh; 
  overflow: scroll;
}

Upvotes: 0

多一点点爱
多一点点爱

Reputation: 1363

<html>
<head>
</head>
<body>
  <div id="main">
    <div id="title">title<div> /* The lack of a slash */
    <div id="list">
      <ul>
        <li>name 1</li>
        <li>name 2</li>
        <li>name 3</li>
        <li>name 4</li>
        <li>name 5</li>
        <li>name 6</li>
        <li>name 7</li>
        <li>name 8</li>
        <li>name 9</li>
        <li>name 10</li>
        <li>name 11</li>
        <li>name 12</li>
        <li>name 13</li>
        <li>name 14</li>
        <li>name 15</li>
        <li>name 16</li>
        <li>name 17</li>
        <li>name 18</li>
        <li>name 19</li>
        <li>name 20</li>
        <li>name 21</li>
      </ul>  
    </div> 
  <div> /* The lack of a slash */
</body>
</html>

dom Structure of the error

#main{
  height: calc(100vh - 2px);/* The border is 2 pixels and needs to be subtracted */
  overflow: auto;
}

Upvotes: 0

Beller
Beller

Reputation: 888

I have added some rules to ul like:

ul {
  overflow-y: scroll;
  height: calc(100vh - 4rem);
}

Upvotes: 0

Related Questions