javascript - 允许在溢出的较小父 Div 内动态调整大小的子 Div :auto to be larger than their parent

Question

我正在构建一个从 javascript 对象加载文件夹/文件树的文件系统。它工作得很好，但现在我正试图将整个东西限制在一个我可以滚动的盒子里。问题是框​​ (.explorer) 将文件和文件夹的宽度限制为它自己的宽度。文件和文件夹文本不受限制，只有它们的背景颜色受限制。

这是 CSS 和 HTML。我希望你能帮上忙。

.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;
}

还有一段javascript生成的粗略的HTML

<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

我会称之为错误。 .explorer 框的背景适合容器，而不适合内容，这是不寻常且不需要的。

您的情况的快速修复是在 .explorer 中插入一个虚拟 div，并设置 style="float: left"，这将提示浏览器重新计算其子项的框大小，而不是其父项的宽度。

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