html - 滚动条将元素推到新行

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

这对我有用，希望它能解决您的问题。