Question

I’m building a file system that loads a folder/file tree from a javascript object. It works very well, but right now I’m trying to constrain the whole thing to a box that I can scroll around. The issue is that the box (.explorer) is constraining the files and folders’ widths to it’s own width. The file and folder text isn’t constrained, only their background colors are.

Here is the CSS and HTML. I hope you can help.

.explorer{
    width:100px;
    height:100px;
    margin:35px;
    float:left;
    overflow:auto;
}
.folder, .file{
    width:100%;
    padding:4px 6px;
    cursor: pointer;
    Background:#212121;
    color:#fff;
}
.file{
    Background:#eb9824;
}
.hide, .show{
    margin-left:20px;
}

And a section of the rough HTML generated by javascript

<div class="explorer">

    <div class="folder">root</div>
    <div class="show" id="rootcontents">

        <div class="folder" id="root-folder1">folder1</div>
        <div class="show" id="root-folder1contents">

            <div class="folder" id="root-folder1-folder1">folder1</div>
            <div class="hide" id="root-folder1-folder1contents" style="display: block;">

                <div class="folder" id="root-folder1-folder1-folder1">folder1</div>
                <div class="hide" id="root-folder1-folder1-folder1contents" style="display: block;">

                    <div class="file" id="root-folder1-folder1-folder1-file1">file1</div>
                    <div class="file" id="root-folder1-folder1-folder1-file2">file2</div>

                </div>
            </div>

            <div class="folder" id="root-folder1-folder2">folder2</div>
            <div class="hide" id="root-folder1-folder2contents" style="display: none;">

                <div class="folder" id="root-folder1-folder2-folder1">folder1</div>
                <div class="hide" id="root-folder1-folder2-folder1contents" style="display: none;">

                    <div class="file" id="root-folder1-folder2-folder1-file1">file2</div>
                    <div class="file" id="root-folder1-folder2-folder1-file2">file2</div>

                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

I’d call that a bug. The .explorer box has a background that fits the container, not the content, which is unusual and undesired.

The quick fix in your case is to insert a dummy div right inside the .explorer, and set style="float: left", which will prompt the browser to recalculate the box size from its children, instead of its parent’s width.

http://jsfiddle.net/G9v4w/2/