Question

我有以下JSFiddle，基本上我的目标是使.dialog_list > .list元素适合dialog-wrap并变为可滚动。起初，我认为用某种overflow-y: auto;很容易实现，但我没有成功。我是高级CSS的新手，我已经多次阅读有关CSS弹性框的文档，尝试了位置（相对的，绝对的）以及底部/顶部/左/右，但每次我都看起来很奇怪结果。请帮帮我！

请注意！

如果我改变

.dialog_wrap > .dialog_list {
  width: 430px;
  border-right-style: solid;

}

到

.dialog_wrap > .dialog_list {
      width: 430px;
      border-right-style: solid;
      overflow-y: auto; 
    }

然后我有令人满意的结果，但问题是我不希望标题位于可滚动空间中。我只希望.dialog_wrap > .dialog_list > .list可滚动，而不是.dialog_wrap > .dialog_list

Answer 1

你几乎拥有它。您需要指定容器的高度，以便overflow起作用（因为如果它的高度不受约束，它将永远不会溢出）。

这里是updated code。在此版本中，您不需要对列表的高度进行硬编码。它将填充剩余空间并可滚动，而标题保持在顶部。这可以在height: calc(100% - 50px);上使用.list并使其成为overflow: auto。此外，您还需要确保.list-dialog元素也有height: 100%，否则它只会增长而不会使.list溢出。

＆＃13;

* {
  border-width: 1px;
  border-color: #e3e4e8;
}

.dialog_wrap {
  display: flex;
  height: 150px;
  overflow: hidden;
  width: 500px;
  border-style: solid;
  border-width: 1px;
  border-color: red;
}

.dialog_wrap > .dialog_list {
  width: 430px;
  height: 100%;
  border-right-style: solid;
}

.dialog_wrap > .dialog_list > .heading {
  position: relative;
  font-weight: bold;
  height: 50px;
  border-style: solid;
}

.dialog_wrap > .dialog_list > .list {
  height: calc(100% - 50px);
  overflow-y: auto;
}

.dialog_wrap > .dialog_list > .list ul {
  padding: 0 !important;
  list-style-type: none;
}

.dialog_wrap > .dialog_list > .list li > .dialog_instance {
  border-bottom-style: solid;
  padding: 15px;
  display: flex;
  margin: 0px !important;
}

.dialog_wrap > .details {
  width: 100%;
  height: 100%;
}

.dialog_wrap > .details > .container {
  position: relative;
  width: inherit;
  height: inherit;
  padding: 0;
}

.dialog_wrap > .details > .container > .heading {
  height: 50px;
  border-style: solid;
}

.dialog_wrap > .details > .container > .body {
  overflow-y: auto;
  width: 100%;
  padding: 5px 5px 5px 5px;
}

＆＃13;

<div class='dialog_wrap'>
  <div class='dialog_list'>
    <div class='heading'>
      <div>Section A</div>
    </div>
    <div class='list'>
      <ul>
        <li>
          <div class='dialog_instance'>
            <span>A</span>
          </div>
        </li>
        <li>
          <div class='dialog_instance'>
              <span>B</span>
          </div>
        </li>
        <li>
          <div class='dialog_instance'>
              <span>C</span>
          </div>
        </li>
        <li>
          <div class='dialog_instance'>
              <span>D</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class='details'>
    <div class='container'>
      <div class='heading'>
        Section B
      </div>
      <div class='body'>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

使用此CSS：

.dialog_wrap > .dialog_list > .list {
  height: 90px;
  overflow-y: auto;
}

..具有预定义的高度

Answer 3

尝试

overflow-y：滚动;

我认为这就是你要找的东西。

使div高度伸展到父剩余空间并使其可滚动

3 个答案: