克服溢出：父元素的隐藏属性

Question

通过单击按钮，我将新元素添加到列表中。 每个元素都有其自己的消息，该消息绝对与该元素相对。 直到我将“ overflow：hidden”属性添加到父列表元素之前，此方法都可以正常工作。 显然，该消息被隐藏了。 如果必须设置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>");
});

编辑：我尝试使用溢出x和溢出y属性。 但是不知何故它没有按照我的期望去做。 将这些属性添加到#list元素中：

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

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

Answer 1

更改height的#list到min-height 。

检查更新的小提琴 。