滚动条推元素到新行

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

这对我的作品，希望它能解决你的问题起诉。