javascript - オーバーフローを克服: 親要素の隠しプロパティ

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>");
});

編集：overflow-xおよびoverflow-yプロパティで遊んでみました。しかし、どういうわけか、それは私が期待することをしていません。これらのプロパティを #list 要素に追加します。

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

下スクロールバーを作成します。期待される動作ですか？

Answer 1

から へheightの変更。#listmin-height

更新された Fiddleを確認してください。