Imagine having a content div displaying a long line of text. I want this content to be enclosed within a wrapper div that has a fixed height and the ability to horizontally scroll if the content exceeds the width of the wrapper div.
Here are two possible solutions:
- Using
white-space: nowrap;, which may seem like a workaround. When you run the provided snippet, you'll notice that the background does not extend to the edges of the text due to overflow. - Setting a specific width works as intended but becomes problematic when the text length inside the content div is unknown. Vertical scrolling doesn't require predicting the exact height needed for activating it.
Essentially, I'm searching for a way to replicate horizontal scrolling similar to vertical scrolling in browsers. If achieving this isn't feasible (which seems likely), are there alternative solutions other than the ones mentioned?
.wrapper {
position: relative;
background-color: green;
width: 50%;
overflow: auto;
overflow-y: hidden;
padding-bottom: 50px;
}
.content {
background-color: rgba(255,255,255,0.25);
white-space: nowrap;
}<div class="wrapper">
<div class="content">
one two three four five six seven eight nine ten eleven twelve thirteen
</div>
</div>