Struggling to make a scroll bar appear in the box-content div, even after adding 'overflow-y:auto'.
My specific requirements are:
- The entire layout should adjust according to the browser height. This is why I've set #wrap { ... height: 50vh; ...}
- The scroll bar shouldn't include the header, but only apply to the box-content div. The header's height should adapt to its contents and wrap them if needed.
Below is the CSS code:
#wrap {
margin: 10px;
height: 50vh;
border: 2px solid black;
}
.container {
border: 4px solid red;
padding: 4px 3px;
margin: 0;
max-height: 90%; // As a percentage of the parent.
/* height: 300px; /* This causes the scroll bar to appear, but its not what I want. */
}
.box-header {
background-color: green;
padding: 5px 10px;
color: white;
}
.box-content {
border: 3px solid blue;
overflow:auto;
padding: 5px;
padding-top: 10px;
max-height:100%;
}
And here's the HTML:
<div id="wrap">
<div class="container">
<div class="box-header"> Header String</div>
<div class="box-content">
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
<p>line 5</p>
<p>line 6</p>
<p>line 7</p>
<p>line 8</p>
<p>line 9</p>
<p>line 10</p>
<p>line 11</p>
<p>line 12</p>
<p>line 13</p>
<p>line 14</p>
<p>line 15</p>
<p>line 16</p>
<p>line 17</p>
<p>line 18</p>
<p>line 19</p>
</div>
</div>
</div>
Link to the fiddle for reference: https://jsfiddle.net/mjvancouver905/5vswprfw/
Thanks for your help.