在最大高度的情况下如何将背景色应用于整个div

Question

在溢出情况下如何将背景色应用于整个div：自动      div。当前背景色仅应用于div.not的一部分      全格。

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

Answer 1

如果我理解正确..请尝试

<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>

Answer 2

如果您查看检查器（在Firefox中，菜单（3栏）> Web Developer> Inspector），您会看到整个div变成红色。如果要使整个高度为红色，则必须使div高度更大。

在此处复制答案-https://stackoverflow.com/a/23300532/4711754 给

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

在这里提琴-https://jsfiddle.net/25cr7k98/

Answer 3

只需添加高度：200px；像这样

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

，你应该很好。希望对您有所帮助：）