内容应始终适合父div - 使用字体大小百分比 -

Question

我的笔：

http://codepen.io/helloworld/pen/zvGgt

当您垂直调整窗口大小以缩小垂直堆叠的div时，div内部内容的字体大小对于单个div来说太小，因此整个div堆栈会垂直溢出。

我想在堆栈上使用字体大小百分比，所以当调整浏览器窗口大小时，字体大小会减小，所以除了堆栈没有溢出，因为div还有空间缩小。

在我的情况下，当我只希望我的堆栈使用字体大小百分比而不是html页面的其余部分时，最好的方法是什么。

你在什么地方声明，请提供一个解决方案，你修改我的样本作为基础，这样我就能理解它，谢谢你。

看看这张图片：我的问题是文字“7”不能再被阅读所以我必须缩小/缩小文字......

CSS

body, html {
    width: 100%;
    height: 100%;   
    font-family: arial;
    /*overflow: hidden;*/
}

* { /* Every element which has a border or padding value puts this value inside the div */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 0;
    margin: 0;
}

._Z {
    width: 12.50%;
}

.Stack {
    display: table;
    height: 100%;
    float: left;
}

    .Stack li {
        list-style: none;
        display: table-row;
    }

        .Stack li div {
            display: table-cell;
        }

.horizontal-right {
    text-align: right;
}

.horizontal-center {
    text-align: center;
}

.vertical-center {
    vertical-align: middle;
}

#responseView {
    height: 100%;
}

HTML

<div id="responseView" data-bind="swipeLeftRightContentViews: $root.showMapView">
        <div style="height: 100%;"> 
           <ul class="Stack _Z" data-bind="foreach: replyTimeStack.segments">

             <li style="height:14.2%;background: green; color: black;">
                    <div style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">11</div>
                </li>
             <li style="height:14.2%;background: green; color: black;">
                    <div style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">22</div>
                </li>
             <li style="height:14.2%;background: green; color: black;">
                    <div style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">33</div>
                </li>
             <li style="height:14.2%;background: green; color: black;">
                    <div style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">44</div>
                </li>
                <li style="height:14.2%;background: yellow; color: black;">
                    <div style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">55</div>
                </li>
              <li style="height:14.2%;background: orange; color: black;">
                    <div style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">33</div>
                </li>
              <li style="height:14.2%;background: green; color: black;">
                    <div style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">66</div>
                </li>

            </ul> 

        </div>       
   </div>