如果在固定容器内溢出div，如何使两个可滚动？

Question

这是我的JSfiddle https://jsfiddle.net/tan3j6ja/2/

当我隐藏内容时，我正在尝试使用滚动内部的两个div修复页面换行。即使内容明显隐藏，也不会滚动。

编辑：我希望它们能够独立滚动。

.page-wrap {
background-color: #fff;
margin: auto;
margin-top: 60px;
width: 500px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 20px
}

.grid {
display: flex;
align-items: flex-start;
}

.is-half-1 {
  width: 50%;
  background-color: yellow;
  overflow-y: scroll;
  overflow-x: hidden;
}

.is-half-2 {
  width: 50%;
  background-color: blue;
   overflow-y: scroll;
  overflow-x: hidden;
}

Answer 1

这是因为你没有设置实际高度，所以溢出并不知道实际滚动。为两个div添加像素高度解决了这个问题。

＆＃13;

＆＃13;

.page-wrap {
  background-color: #fff;
  margin: auto;
  margin-top: 60px;
  width: 500px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 20px
}

.grid {
  display: flex;
  align-items: flex-start;
}

.is-half-1 {
  width: 50%;
  height: 300px;
  display: block;
  background-color: yellow;
  overflow-y: scroll;
  overflow-x: hidden;
}

.is-half-2 {
  width: 50%;
  height: 500px;
  display: block;
  background-color: blue;
  overflow-y: scroll;
  overflow-x: hidden;
}

.small-container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.field-input {
  width: 100%;
  margin: 5px 0;
  padding-left: 3px;
  font-size: 15px;
  height: 26px;
}

li {
  width: 100%;
  display: block;
}

＆＃13;

<div class="page-wrap">
  <div class="grid">
    <div class="is-half-1">
      <h1>Search</h1>
      <input class="field-input" />
      <input class="field-input" />
      <input class="field-input" />
      <input class="field-input" />
      <input class="field-input" />
      <input class="field-input" />
      <input class="field-input" />
      <input class="field-input" />
      <input class="field-input" />
      <input class="field-input" />
    </div>
    <div class="is-half-2">
      <div class="small-container">
        <h1>Results</h1>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
        <li>Result</li>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在Trasiva的解决方案的帮助下，我找到了一种方法，使其滚动到列表的末尾，并使其从窗口底部切断，以便窗口可以是任何高度。我将位置：绝对放在滚动div上并将高度设置为100％。