height issue in bootstrap columns

Question

I have two div , first one takes 2 cols , and the second takes 10 cols i want the first div's height equals to the row's height

I tried .menu-col { height :100% } , but doesn't work .

.main-row ,.menu-col,.content-col
{
 margin: 0;
 padding: 0;
}

.main-row >div:first-child
{
 background-color: #DDD;
}

.main-row >div:last-child
{
 background-color: #eee;
}

.menu
{
 background-color: #111;
}

  
            <div class="row main-row"> 
        
                    <div class="col-sm-2 menu-col">
      <div class="menu">
       Menu
      </div>
                    </div>

                      <div class="col-sm-10 content-col">
                        Content
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>

                      </div>
        
            </div>
   

This is what i have

And this is what i want

Answer 1

I think you can use height:100vh which worked for me.

.menu{ background-color: #111; height:100vh; }