Шкала правого столбца в сетке до 100% левой колонки

Question

Я использую сетку фундамента. У меня есть сетка с двумя столбцами и хотелось бы, чтобы содержимое шкалы правого столбца на 100% превышало высоту левого столбца.

Я сделал JSBin, чтобы проиллюстрировать мою проблему (вам нужно открыть выход на отдельной вкладке по некоторым причинам).

Вот как это выглядит:

div { 
 
    border: 1px solid #CCC; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/normalize.min.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css" rel="stylesheet"/> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/vendor/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation.min.js"></script> 
 
<div class="row" style="width:50%"> 
 
    <div class="small-8 columns"> 
 
    <div class="row"> 
 
    left column first row 
 
    </div> 
 
     <div class="row"> 
 
    left column second row 
 
    </div> 
 
     <div class="row"> 
 
    left column third row 
 
    </div> 
 
      <div class="row"> 
 
    left column fourth row 
 
    </div> 
 
      <div class="row"> 
 
    left column fifth row 
 
    </div> 
 
      <div class="row"> 
 
    left column sixth row 
 
    </div> 
 
      <div class="row"> 
 
    left column seventh row 
 
    </div> 
 
      <div class="row"> 
 
    left column eigth row 
 
    </div> 
 
      <div class="row"> 
 
    left column ninth row 
 
    </div> 
 
    </div> 
 
    <div class="small-4 columns"> 
 
     <div class="row"> 
 
    this is supposed to scale to 100% of the size of the left column 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

Попробуйте так: Demo

CSS:

div { 
    border: 1px solid #CCC;  
} 
#row_box{ 
    display:table; 
} 
.child{ 
    display:table-cell; 
    background-color:red; 
}  
.child:nth-child(2) 
{ 
    background-color:yellow; 
} 

HTML:

<div class="row" style="width:50%"> 
    <div id="row_box"> // added id row_box 

    <div class="large-8 child"> // added class child & removed columns 
    <div class="row"> 
    left column first row 
    </div> 
     <div class="row"> 
    left column second row 
    </div> 
     <div class="row"> 
    left column third row 
    </div> 
      <div class="row"> 
    left column fourth row 
    </div> 
    </div> 

    <div class="large-4 child"> // added class child & removed columns 
     <div class="row"> 
    this is supposed to scale to 100% of the size of the left column 
     </div> 

    </div> 
    </div> 
    </div> 

Примечание: Это -ve запас приходит из файла CSS.