滾動條推元素到新行

Question

這裏的問題的一個例子：https://jsfiddle.net/9nrzon87/

的問題是，由於overflow-y: auto時滾動條它推動在新的一行HTML元素的一個雖然width爲auto和內容應該確定寬度。

如何克服這一點，而不固定任何寬度？ 設置absolute和fixed定位也不是一個選項。

HTML：

<div class="bg h100"> 
    <div class="dtable w100 h100"> 
    <div class="dcell txtcent valignM"> 
     <div class="wrap dinlblk txtleft"> 
     <header> 
      <h5>Hello</h5> 
      <h6>World</h6> 
     </header> 
     <section> 
      <div class="dinlblk"> 
      <p>paragraph</p> 
      <p>another paragraph</p> 
      <p>paragraph</p> 
      <p>paragraph IV</p> 
      </div> 


      <div class="dinlblk"> 
      <p>paragraph</p> 
      <p>more paragraph</p> 
      <p>paragraph VII</p> 
      </div> 
     </section> 
     <footer></footer> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

body, h5, h6 { 
    margin: 0; 
    line - height: 18 px; 
} 
.w100 { 
    width: 100 % ; 
} 
.h100 { 
    height: 100 % ; 
} 
.dtable { 
    display: table; 
} 
.dcell { 
    display: table - cell; 
} 
.dinlblk { 
    display: inline - block; 
} 
.valignM { 
    vertical - align: middle; 
} 
.txtleft { 
    text - align: left; 
} 
.txtcent { 
    text - align: center; 
} 

.bg { 
    background - color: #0ff; 
} 
.wrap{ 
    background-color: # fff; 
} 

.wrap header, 
.wrap section, 
.wrap footer { 
    padding: 20 px; 
} 

.wrap header { 
    border - bottom: 1 px solid# ddd; 
} 
.wrap footer { 
    border - top: 1 px solid# ddd; 
} 

.wrap section { 
    max - height: 150 px; 
    overflow - y: auto; 
} 

.wrap section div { 
    padding: 20 px; 
    vertical - align: top; 
    border: 1 px solid# ddd; 
} 

欣賞任何幫助

Answer 1

只是一個屬性添加到該類：

.wrap section div{display:table-cell;} 

這對我的作品，希望它能解決你的問題起訴。