CSS: Expand height of column in a fixed size overflow div

I want to expand the height of a column in a fixed size overflowed div.

With the overflow: auto, height: 100% doesn't expand to the end of the scroll.

In my JSFiddle, I want the red column to be the same size as the blue.

https://jsfiddle.net/4g0v66sL/

2 answers

  • answered 2018-01-11 20:54 Temani Afif

    A solution is to use a pseudo element to fill the remaining space. By the way it's more a hack than a generic solution:

    .row-scroll {
      height: 130px;
      overflow-y: auto;
      background-color: gray;
    }
    
    .red {
      background-color: red;
      position:relative;
    }
    .red:before {
      content:"";
      position:absolute;
      top:100%;
      bottom:-1000%;
      left:0;
      right:0;
      background:red;
      z-index:0
    }
    
    .blue {
      background-color: blue;
    }
    
    .column {
      width: 60px;
      float:left;
    }
    <div class="row row-scroll">
      <div class="column blue">
        AAA BB CC DD AAA BB CC DD AAA BB CC DD D AAA BB CC DD AAA BB CC DD
    
      </div>
      <div class="column red">
        BBB
      </div>
    </div>

  • answered 2018-01-11 20:55 Marc Bellêtre

    As Blazemonger said, you can achieve this using display: flex on a div inside your overflowed div.

    HTML

    <html>
      <body>
        <div class="row row-scroll">
          <div class="content">
            <div class="column blue">
              AAA BB CC DD AAA BB CC DD AAA BB CC DD D AAA BB CC DD AAA BB CC DD
            </div>
            <div class="column red">
              BBB
            </div>
          </div>
        </div>
      </body>
    </html>
    

    CSS

    .row-scroll {
      height: 130px;
      overflow-y: auto;
      background-color: gray;
    }
    .content {
      display: flex;
    }
    

    See the Fiddle