kentor kentor - 4 days ago 8
CSS Question

Enable horizontal scrolling for main div

I have a main div and a sidebar on the right (for navigation/filters). The main div is being used for showing logfiles and under no circumstances it should write into the right sidebar.

The problem:
When a very long message without spaces (for example a long filepath) appears, it will write into my right sidebar. Instead I would like to have an own horizantal scrollbar for this div.

The code: I have created a JSFiddle which demonstrates the problem: https://jsfiddle.net/pu9b5pu2/

It is about these two divs here:

<div class="col-xs-9">
<div class="debug">
<div class="timestamp">[09:33:04.137] </div>
<div class="message">BlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaBlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaBlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaBlaaaaBlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>
</div>

<!-- Right side bar -->
<div class="col-xs right-sidebar">
<div id="title-sidebar">
<strong id="title">Filters</strong>
</div>
<input type="checkbox" id="debug" value="value">
<label for="debug">Debug messages</label>
</div>
</div>

Answer

Add overflow: auto; to the .col-xs-9 container.

Change this line from your JSFiddle:

<div class="col-xs-9" style="white-space: normal; word-wrap: break-word; overflow-wrap: break-word;">

To this:

<div class="col-xs-9" style="white-space: normal; word-wrap: break-word; overflow-wrap: break-word; overflow: auto;">

And optionally, so the text isn't flush to the right when you scroll all the way, you can add padding-right: 15px; to the .message element.

Comments