Kris Jones Kris Jones - 4 months ago 9
CSS Question

How to make two scrollable if overflow divs inside a fixed container?

Here's my JSfiddle https://jsfiddle.net/tan3j6ja/2/

I'm trying to make a page wrap that is fixed with two divs inside that scroll when content is hidden. Even though the content is clearly hidden it won't scroll.

Edit: I want them to scroll independently.

.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

This is due to you not setting the actual height, so the overflow doesn't know to actually scroll. Adding pixel heights to both divs resolved the issue.

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

Comments