Css 流体子元素与父元素的高度相同

在左框中，我希望子元素与父元素具有相同的高度

正如您在小提琴中看到的，父元素是具有绿色边框的元素

当右框高度增加时，左框的子元素没有

100%

高度

注意：我不想使用一些填充物

HTML:

---

增加

高度：100%至
。关键字\u类别\u包装

.keyword_category_wrapper {
    display: table;
    width: 100%;
    height:100%; /* added */
    text-align: center;
}



body{    
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
}

.search_navigation{
    width: 100%;             
    height:10%;  
    position:relative;
    display:table;

}   

.keyword_category_wrapper{
    display: table;
    width: 100%;        
    text-align: center; 

}

.keyword_category_space{
    display: table-cell;
    width: 5%;
    position: relative;    
}

.keyword_wrapper, .category_wrapper{
    display: table-cell;
    width: 47.5%;
    position: relative;    
    vertical-align: middle;
    border: 1px solid green;
}

.keyword_icon_txt_wrapper, .category_icon_txt_wrapper{
    display: table;
    text-align: center; 
    position: relative;
    width: 100%;
    height: 100%;

}

.keyword_icon{
    color: white;
    font-weight: 400;
    font-size: 1em;
    display: table-cell;
    vertical-align:middle;
    position: relative;
    width: 30%; 
    height:100%;
    background-color: #FB7F27;
}

.category_icon{ 
    display: table-cell;
    vertical-align:middle;
    position: relative;
    width: 30%;
    background-color: #FB7F27; 

}

.keyword_txt{
    font-size: 1em;    
    color: white;
    display: table-cell;
    vertical-align:middle;  
    position: relative;
    width: 70%;  
    background-color: #F89551;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px 3px 3px 0px;
    border-radius: 0px 3px 3px 0px; 
    height:100%;


}

.category_txt{
    font-size: 1em;
    color: white;
    display: table-cell;
    vertical-align:middle;    
    position: relative;
    width: 70%; 
    background-color: #F89551; 
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px 3px 3px 0px;
    border-radius: 0px 3px 3px 0px;      
}

.keyword_category_wrapper {
    display: table;
    width: 100%;
    height:100%; /* added */
    text-align: center;
}