Seeking to create a header with flex items within it, allowing for variable height. Below that, looking for a scrollable area that fills the remainder of the browser viewport exactly.
Attempted code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/"
</head>
<body style="height:100vh;overflow:hidden">
<div>
Variable height
<hr><hr><hr><hr><hr><hr><hr>
</div>
<div style="height:100%">
object
<div style="height:100%;overflow-y:scroll">
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li>
<li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li>
<li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
</ul>
</div>
</div>
</body>
</html>
Encountering an issue where the scrollbar does not appear when resizing the browser to a smaller height as expected: the scrollbar only appears when the clipped portion of the lower div is equivalent in height to the header. Experiencing this problem in chrome and firefox, suggesting possible misuse of styles.
Why does the header height affect the overflow of the second div? Is there a correct way to achieve the desired layout, potentially using a different method?