设置max-height flex父级，拉伸嵌套子级，但在其内部溢出-y自动

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*/
}

希望这会有所帮助。