I'm trying to build a UI similar to Apple Mail, when left bar has horizontal list of emails through which you can scroll. The problem is that when I add a scroll, it's creating an additional padding instead of being rendered on top of the content.
<!doctype html>
<html style="height: 100%;">
<head>
<style>
.scrollable-list-item {
padding: 1rem;
border-bottom: 1px solid #cdcdcd;
}
.scrollable-list-item-active {
background-color: #0069d9;
color: white;
}
</style>
</head>
<body style="height: 100%; width: 100%; margin: 0">
<div style="height: 100%; width: 100%; display: flex;">
<div style="width: 200px; height: 100%; overflow-x: scroll; background-color: #efefef;">
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item scrollable-list-item-active">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
<div class="scrollable-list-item">scrollable list item</div>
</div>
<div>content</div>
</div>
</body>
</html>Without scroll:
With scroll:
What is the proper way to add scroll without adding a blank area around it? Thank you!