отзывчивый div поток внутри другой div

Question

Я хочу передать несколько divs (function_block) внутри другого div (WebPage_NavigationWrapper). Я не хочу давать WebPage_NavigationWrapper размер div fix, не увеличивает его высоту, чтобы настроить переполнение других divs (function_block), но полоса прокрутки отображается на WebPage_NavigationWrapper div.

http://jsfiddle.net/toxic_kz/oqowv1wb/

Теперь я знаю, что могу добиться этого с помощью дисплея: таблицы-клетки; но затем я теряю ширину функции_блоков в случае, если она перетекает.

.function_block{ 
display:table-cell; 
width:120px; 
height:60px; 
margin-left:3px; 
margin-top:3px; 
background-color:blueviolet; 
} 

http://jsfiddle.net/toxic_kz/oqowv1wb/

Answer 1

Я нашел ответ; ввести другой DIV с шириной в рх внутри functionBlock DIV и дать functionBlock Div ​​

<div class="function_block"> 
      <div class="function_inner_block"> 
       function_block 
      </div> 
     </div> 

     <div class="function_block"> 
      <div class="function_inner_block"> 
       function_block 
      </div> 
     </div> 

     <div class="function_block"> 
      <div class="function_inner_block"> 
       function_block 
      </div> 
     </div> 

     <div class="function_block"> 
      <div class="function_inner_block"> 
       function_block 
      </div> 
     </div> 

и дать functionBlock дисплей DIV: стол-клетки;

.function_block{ 
display: table-cell; 

/*float:left;*/ 
width:120px; 
height:60px; 
margin-left:3px; 
margin-top:3px; 

background-color:blueviolet; 

}

.function_inner_block{ 
width:121px; 
min-width:121px; 

background-color:yellow; 
} 

Теперь тот, кто поставил отрицательный след в моем блоге следует либо изменить до плюс знак или принести мне другое решение ....

Answer 2

Установка фиксированной высоты родительского DIV затем скроллер позволит для дел.

#WebPage_NavigationWrapper{ 
    /*display: table; 
    table-layout: fixed;*/ 
    width:100%; 
    height:50px; 
    padding:10px; 
    overflow: auto; 



} 

Пожалуйста, обратитесь к следующей ссылке из скрипки.

`http://jsfiddle.net/toxic_kz/oqowv1wb/` 

Answer 3

Пожалуйста, используйте overflow:auto в overflow:scroll будет поддерживать скроллбар независимо от того, есть ли перетекание содержание или нет, но auto будет показывать только это, когда это необходимо.

Так что ваш код должен выглядеть следующим образом:

#WebPage_NavigationWrapper{ 
    /*display: table; 
    table-layout: fixed;*/ 
    width:100%; 
    height:auto; 
    padding:10px; 
    overflow-x: auto; 
    overflow-y: hidden; 
} 

JSFIDDLE