允許動態調整大小的孩子Div內部的一個較小的父母Div內溢出：自動大於他們的父母

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

<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

我會打電話的是一個bug產生的粗HTML的部分。 .explorer框的背景適合容器，而不是內容，這是不尋常的和不受歡迎的。

你的情況下的快速修復是在.explorer內插入一個虛擬div，並設置style="float: left"，這將提示瀏覽器重新計算其子項的大小，而不是其父寬度。

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