0

enter image description here

How to apply background color to whole div in case of overflow:auto div.currently background color is applied to only some part of div.not a whole div.

.brd{
    border:1px solid grey;
    height:auto;
    max-height: 200px;
    overflow:auto;
  }
.content{
    float: left;
    width:50%;
}
 .back-clr{
    background-color: red;
 }


 <div class="container">
  <div class="row">
      <div class="col-md-8 brd">
        <div class="content" style="width:50%">
            test test test <br>
            test test test <br>
            test test test <br>
            test test test <br>
            test test test <br>
            test test test <br>
            test test test <br>
            test test test <br>
            test test test <br>
                            </div>       
        <div class="content back-clr">
            this is second div
        </div>  
      </div>          
    </div>

sticky bit
  • 36,626
  • 12
  • 31
  • 42
Pratik
  • 11
  • 1
  • 6
  • Could you update the question to be clearer on what you are looking for as the expected outcome? Specifically which div are you looking to set the background colour for...the whole container, the div with class content or just the 2nd div? – Andrew Allen May 24 '19 at 18:02
  • 2nd div should fill completely.now it filling partially. – Pratik May 25 '19 at 10:28
  • Can you accept or reject an answer ? – Matt May 30 '19 at 04:54

3 Answers3

1

enter image description here

If you look an Inspector (Menu (3 bars) > Web Developer > Inspector in Firefox) you can see the full div is made red. If you want the full height to be red you will have to make the div height bigger.

Copying the answer here - https://stackoverflow.com/a/23300532/4711754 gives

.brd{
    border:1px solid grey;
    display: flex;
  }
.content{
    float: left;
    width:50%;
}
 .back-clr{
    background-color: red;
 }

Jfiddle here - https://jsfiddle.net/25cr7k98/

Andrew Allen
  • 6,512
  • 5
  • 30
  • 73
0

If I understand right.. try this

<style>
  .brd {
    border: 1px solid grey;
  }

  .content {
    float: left;
    width: 50%;
  }

  .back-clr {
    background-color: red;
  }

  .scroll-hold {
    overflow: auto;
    max-height: 200px;
  }
</style>
  <div class="container">
    <div class="row">
      <div class="col-md-8 brd">
        <div class="row scroll-hold">
          <div class="col content" style="width:50%">
            test test test <br>
            test test test <br>
            test test test <br>
          </div>
          <div class="col content back-clr">
            this is second div
          </div>
        </div>
      </div>
    </div>
  </div>
Matt
  • 399
  • 3
  • 6
0

just add height: 200px; like this

.back-clr{
    background-color: red;
   height: 200px;
 }

and you should be good. I hope this helps:)

Aljoha
  • 3
  • 3