javascript - 克服溢出:hidden property of parent element

Question

通过单击按钮，我向列表中添加了新元素。每个元素都有自己的消息，该消息绝对针对该元素定位。这工作正常，直到我将“溢出:隐藏”属性添加到父列表元素。显然，消息被隐藏了。如果 overflow:hiddne 属性必须到位，我如何显示每个新元素的消息？ 这是 jsFiddle和代码:

HTML:

<span id='click-me'>Click me</span>
<ul id='list'></ul>

CSS:

#list {
    width:100px;
    height:100px;
    border: 1px solid blue;
    overflow:hidden;
}
.option {
    width:100px;
    height:20px;
    border: 1px solid green;
    position:relative;
}
.message {
    width: 79px;
    height: 20px;
    background: gray;
    position: absolute;
    right: -90px;
    top: 0;
}

JS:

$('#click-me').click(function() {
    $('#list').append("<li class='option'><div class='message'>I'm message</div></li>");
});

编辑: 我尝试使用 overflow-x 和 overflow-y 属性。但不知何故，它没有按照我的预期去做。将这些属性添加到 #list 元素:

#list {
    ...
    overflow-y:hidden;
    overflow-x:visible;
}

创建底部滚动条。这是预期的行为吗？

Answer 1

将 #list 的 height 更改为 min-height。

检查 updated Fiddle .