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

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

滚动条将元素推送到新行

1 个答案: