I stumbled upon an interesting issue where I applied a div with specific styling:
overflow-x: scroll
However, the outcome was not as expected. Instead of overflowing, the content simply started on a new line. Here is the source code for reference:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1>
<style>
.fl {
float: left;
}
.cp-header {
height: 40px;
padding: 7px 0px;
border-bottom: 2px solid #cdcdcd;
box-sizing: border-box;
}
.cp-header span {
display: inline-block;
border-right: 2px solid #cdcdcd;
box-sizing: border-box;
text-align: center;
height: 24px;
line-height: 24px;
font-size: 14px;
}
</style>
</head>
<body>
<div style="width: 30%; box-sizing: border-box" class="fl">
<div class="cp-header" style="width:100%;">
<span style="width:100%;">name</span>
</div>
</div>
<div id="tabGrp" style="width: 70%; box-sizing: border-box;" class="fl">
<div class="cp-header" style="display: inline-block; overflow-x: scroll; white-space: nowrap;">
<span class="fl" style="width: 100px;">
tab
</span>
<span class="fl" style="width: 100px;">
tab
</span>
... Repeat for remaining tabs ...
</div>
</div>
</body>
</html Upon inspection, my intention was to have the content within "#tabGrp" horizontally scroll by setting the property overflow-x:scroll. If the child elements' width exceeded their parent's width, scrolling should be enabled. However, this desired functionality did not occur. Can you spot any mistakes in my implementation?