<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Unique Title</title>
<style>
#div1 {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
width: auto;
height: 100%;
background: blue;
}
#div2 {
position: absolute;
top: 30%;
left: 0px;
width: 6000px;
height: 300px;
background: black;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
Considering the unique HTML snippet above
Initial Display
Scrolling Towards Right
I've encountered an issue where setting the div1 width to auto doesn't match the div2 width. Can anyone assist me if there's a missing attribute? Is it necessary to use JavaScript to automatically adjust the width or is there a CSS-only solution?
The intention is for it to cover the entire page even after resizing.