css - 相对定位的文本被剪裁，即使有可见的溢出

Question

我正在创建一个日程安排网络应用程序，并使用彩色 block 来指示可用性，为此我使用了一个带有背景色的空 div。现在我正在尝试使用具有相对定位的嵌套 div 在它们上方给这些 block 添加标签。问题是标签 div 中的文本被剪裁了，即使 block 的溢出属性设置为可见。

我的 CSS 是:

.om-wrap{
    position: relative;
    top: 18px;
    width: 100%;
   overflow: auto;
   overflow-y: visible;
   margin: 0 auto;
   white-space: nowrap
}
.time-end{
    position: absolute;
    right: 0;
}
.time-start{
    position: absolute;
    left: 0;
}
.slot{
    position: relative;
    left:10px;
    display: inline-block;
    min-width: 20px;
    width: 20px;
    border-left: 1px solid black;
    border-right: 1px solid black;
    margin-bottom: 10px;
    padding: 0px;
    font-size: 18px;
    overflow: visible;

}
.slot:first-of-type{
clear:both;
}
.slot-avail{
    background-color: green;
}
.slot-break{
    background-color: yellow;
}
.slot-full{
    background-color: red;
}
.slot-wrap{
    clear: both;
    font-size: 0px;
    overflow: visible;
}
.om-label{
    position: relative;
    top: -12px;
    left:-10px;
    text-align: center;
    overflow: visible;
}

HTML 的格式如下:

<div class="om-wrap">
    <div>
        <div class="time-end">&nbsp;</div>
        <div class="time-start">&nbsp;</div>
    </div>
    <div class="slot-wrap">
        <div class="slot slot-full" ><div class="om-label">19:00</div></div>
                <div class="slot slot-full" ><div class="om-label">19:00</div></div>
                <div class="slot slot-full" ><div class="om-label">19:00</div></div>
                <div class="slot slot-full" ><div class="om-label">19:00</div></div>
                ...
        </div>
</div>

我在这里创建了一个 JS fiddle :http://jsfiddle.net/GknLH/

我已经在互联网上搜索了这个问题的解决方案，但由于我什至找不到一个论坛帖子，关于一个看起来很简单的问题，我可能措辞有误，如果有的话，我深表歉意这是一个副本。

Answer 1

您需要为 .om-wrap 删除 overflow: auto;。

检查此更新 DEMO