<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.wrap {
overflow-x: auto;
}
.content {
position: relative;
width: 100%;
min-width: 800px;
height: 200px;
background-color: green;
}
.absolute {
position: absolute;
top: 50%;
right: 0;
background-color: red;
height: 200px;
width: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<div class="absolute"></div>
</div>
</div>
</body>
</html>On my webpage displayed in the code above.
Due to setting a minimum width for .content, I had to include overflow-x: auto; in .wrap.
The .content contains an absolute element.
Outcome:
https://i.sstatic.net/Gq3Se.png
As shown in the image, a single scroll bar appears.
If I were to remove overflow-x: auto; from .wrap:
https://i.sstatic.net/7m9vR.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.wrap {
}
.content {
position: relative;
width: 100%;
min-width: 800px;
height: 200px;
background-color: green;
}
.absolute {
position: absolute;
top: 50%;
right: 0;
background-color: red;
height: 200px;
width: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<div class="absolute"></div>
</div>
</div>
</body>
</html>overflow-x: auto; triggers scrolling when a child has an absolute element. However, I still require overflow-x: auto; for scrollability of the content on smaller screens.
Is there a way to resolve this issue?