Overflow of columns inside box not working

Question

I'm using Chrome, and I can't get these two columns to overflow with a scrollbar inside the box. Instead, they flow past the box.

I've tried messing around with heights, setting overflow: auto/scroll properties on all of the different elements at each level, nothing seems to work.

Here's a codepen of the issue:

https://codepen.io/anon/pen/vqxOBV

.sidebar-list {
  overflow-y: auto;
}

I expect the columns to be contained inside the parent box, and a scrollbar to be visible for that column when the next flows past the containing box.

Edit: I'm trying to create two separate scrollbars, one for the left column and one for the right column.

Questions need to be primarily self-contained, so that the breakage or modification of an external link does not affect the readability of the question, so provide a [mcve] within as well. — Asons, Jun 21 '19 at 11:56

score 0 · Answer 1 · answered Jun 21 '19 at 09:49

0

Add overflow-y: scroll; to .box instead of .sidebar-list

See this fiddle

answered Jun 21 '19 at 09:49

metaDesign

618
3
15

Sai Manoj · Answer 2 · 2019-06-21T10:46:37.180

Make position relative for parent-main and absolute for child-settings elements. Apply overflow: auto;height:100% to the child elements to overflow.

/*parent*/
    .main {
      position: relative;
      width: 100%;
      height: 400px
    }

/*child*/
    .settings {
      overflow: auto;
      height: 100%;
      width: 100%
    }

.main {
  position: relative;
  width: 100%;
  height: 400px
}

.settings {
  overflow: auto;
  height: 100%;
  width: 100%
}

<div class="main">
  <div class="container settings" style="position: absolute;">
    <div class="box no-box-small-mobile">
      <div class="column">
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
      </div>
    </div>
  </div>
</div>
<div class="main">
  <div class="container settings" style="position: absolute;">
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
  </div>

</div>

Thanks, but not exactly what I was looking for. I'm trying to create two separate overflow scrollbars for each column. — jrichie911, Jun 21 '19 at 09:54
@jrichie911 Please check the updated answer. Please upvote and accept my answer if it had helped you. — Sai Manoj, Jun 21 '19 at 10:39

score 0 · Answer 3 · edited Jun 21 '19 at 11:52

0

actually .sidebar-list not getting any calculated height value.

so you can do 2 thing

add overflow-y: auto; with .box <div class="box no-box-small-mobile" style="max-height: 400px; overflow-y: auto;">
add max-height: 400px; in .sidebar-list

.sidebar-list {
  overflow-y: auto;
  max-height: 400px;
}

edited Jun 21 '19 at 11:52

Sai Manoj

3,809
1
14
35

answered Jun 21 '19 at 09:58

Kishor Namdeo

111
1
7

Overflow of columns inside box not working

3 Answers3