设置 max-height flex 父级，拉伸嵌套子级，但在其内部 overflow-y auto

Question

我对嵌套的 flex 子项的溢出有一些问题。我为 flex 父级设置了一个最大高度，让孩子们伸展自己，以适应他们的内容。到目前为止一切顺利，但在孩子们的内部，我有一些嵌套的 div，ul 和 li。我只想看到ul里面的滚动条，不幸的是它不起作用。由于溢出：隐藏，我的内容将被剪切。身高：100% 也不适合我。

.modal-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0px 20px;
  max-height: 1300px;
  background:grey;
}

.modal-section {
  width: 320px;
  background: #fff;
  padding: 25px;
  border-radius: 6px;
  margin-bottom: 20px;
  box-shadow: 0 0.25rem 0.185rem 0 rgba(0, 0, 0, .04);
  cursor: default;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  overflow: hidden;
}

.section-status .modal-container {
  padding-bottom: 0px;
}

.modal-container {
  margin-bottom: 3px;
  padding: 15px 0px;
  overflow: hidden;
}

.address-list-container {
  padding-top: 18px;
  overflow: hidden;
}

.address-list-header {
  background-color: #f5f5f5;
  padding: .5px 0px;
  width: 100%;
}

.address-list-tr {
  color: #7b7b7b;
  font-size: 12.2px;
  -webkit-box-pack: justify;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  padding: .5 0px
}

.address-list-th {
  padding: 0px 5px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.address-list-ul {
  margin-top: 18px;
  overflow-y: auto;
}

.address-list-li {
  -webkit-box-pack: justify;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  padding: 7.5px 0px;
  border-bottom: 1px dotted #d6d6d6;
}

.address-list-li:first-child {
  padding-top: 0px;
}

.address-list-li:last-child {
  border-bottom: none;
}

.address-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  font-size: 13.5px;
  padding: 0px 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="modal-column">
  <section class="modal-section section-status"></section>
  <section class="modal-section network-section">
    <div class="modal-container">
      <h2 class="modal-title">Network</h2>
      <div class="address-list-container">
        <table class="address-list-header">
          <tr class="address-list-tr">
            <th class="address-list-th">Name</th>
            <th class="address-list-th">Address</th>
          </tr>
        </table>
        <ul class="address-list-ul">
          <div class="address-list-li">
            <div class="address-column adress-key" title="1">1</div>
            <div class="address-column adress-value" title="123">123</div>
          </div>
          ......
        </ul>
      </div>
    </div>
  </section>
  <section class="modal-section app-section">
    <div class="modal-container">
      <h2 class="modal-title">1</h2>
      <ul class="bs-list-ul">
        <li class="bs-list-li">
          .......
        </li>
      </ul>
    </div>
  </section>
</div>

Answer 1

在你的 CSS 中试试这个。

. address-list-ul{
     overflow-y:scroll; /*Try this instead*/
}

希望这会有所帮助。