HTML Div Width with Overflow: Auto?

css html width scrollbar

20,792

Solution 1

Attempt 1

Add to the div,

white-space: nowrap;

The problem with this was the vertical scrollbar that appears impedes on the content slightly introducing a small unnecessary horizontal scrollbar.

Attempt 2

Add to the div,

white-space: nowrap;
padding-right: 1.5em;   // increase as appropriate

The problem here is that you're guessing the size of the vertical scrollbar to remove the horizontal one.

Attempt 3

Add to the div,

white-space: nowrap;
overflow-x: hidden; 
overflow-y: scroll;

Now, the horizontal scrollbar is removed, and the size of the vertical one is not being guessed, but it is always visible.

Attempt 4

The problem seems to boil down to needing to reserve the space for a scrollbar, as overflow-y: scroll; does but without it always being visible. The first solution that came to mind was to add an extra div alongside the first that has overflow-y: scroll; set and a width: 100%;. The problem was that with a regular div the scrollbar is included in the width. After some trial and error though, it seems that if you use a float it isn't. So by using an extra float you can force the width of the container to be larger by a scrollbars width, and then setting width: 100%; on the original div, it will take up the extra space too. You hide the extra float by setting it's height to 0.

N.B. I'm not entirely sure why this works myself, and I've only tested on Firefox5 where it seems to work. I hope it's helpful for you. So,

Add,

<div class="hack"></div>

below you're original div. Then,

.content {
    float: left;
    width: 100%;
    overflow-y: auto;
    max-height: 15em;
}

.hack {
    float: left;
    width: 100%;
    overflow-y: scroll;   
    height: 0;
}

An edit of your jsfiddle including this fix is here.

Solution 2

You can enforce a vertical scrollbar with overflow-y: scroll;.

Edit:

Oké, finally I think it's clear what you want.

See this demo fiddle.

CSS:

div {
    overflow: auto;
    max-height: 15em;
    display: inline-block;
}

HTML:

<div>
    <input type="checkbox" id="check" />
    <label for="check">Some text.</label>
</div>

Edit 2:

Ok, maybe this is what you want? I hope you don't mind the extra padding if there are just a few lines in the div.

20,792

Author by

user541686

Updated on July 03, 2020

Comments

user541686 almost 4 years

I'm creating a div like the following:

Edit: Here's an example:

<html>
  <body>
    <table>
      <tr>
        <td>
          <div style="position: relative; overflow: auto; max-height: 15em;">
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

The text of every label unnecessarily wraps to the next line.

How do I fix this?