オーバーフローの影響を受ける要素の位置：hidden

Question

（少なくとも私にとって）非常に奇妙な問題が発生しています。これはメニューです。タブの上にマウスを置くと、その高さが拡大され、メニュー項目が表示されます。タブにはoverflow：hiddenというプロパティがあり、タブ上にカーソルを置いたときにのみ項目が表示されます。 これは本当に奇妙なことです。タブの上にマウスを置いて拡大すると、他のタブの下端が最初の下端をたどるように見えるため、最初のタブが下に移動するようになります。私はオーバーフローを削除すると、この動作が消えます：隠された！ ここで私はいくつかのポジションをとりました。ここでは絶対トリッキーですが、関連する部品が相対的に配置されていることを二重に確認しました。私はこれを引き起こす可能性のあるものについてアイデアがありません。ここで

---

は非常に最小限のテストケースである：

HTML

<div id="menu"> 
    <div class="menu-tab">Hover here!</div> 
    <div class="menu-tab">Or here!</div> 
</div> 

CSS

#menu { /* issue disappears without this */ 
    height: 15pt; 
} 

.menu-tab { 
    display: inline-block; 
    height: 100%; /* required for animation, not affecting behavior */ 
    overflow: hidden; /* this one! */ 
    background-color: rgb(0, 0, 0); 
    color: rgb(255, 255, 255); 
    transition: height 0.3s ease; 
} 

.menu-tab:hover { 
    height: 500%; 
} 

JSFiddle

Answer 1

を使用しますタブのプロパティ：

#menu { 
 
    /* issue disappears without this */ 
 
    height: 15pt; 
 
} 
 

 
.menu-tab { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    /* add this */ 
 
    height: 100%; 
 
    /* required for animation, not affecting behavior */ 
 
    overflow: hidden; 
 
    /* this one! */ 
 
    background-color: rgb(0, 0, 0); 
 
    color: rgb(255, 255, 255); 
 
    transition: height 0.3s ease; 
 
} 
 

 
.menu-tab:hover { 
 
    height: 500%; 
 
}

<div id="menu"> 
 
    <div class="menu-tab">Hover here!</div> 
 
    <div class="menu-tab">Or here!</div> 
 
</div>

Answer 2

あなたはinline-block要素が揃っ残るようにvertical-align:top;を追加する必要があります。

#menu { 
 
    /* issue disappears without this */ 
 
    height: 15pt; 
 
} 
 

 
.menu-tab { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    /* THIS */ 
 
    height: 100%; 
 
    /* required for animation, not affecting behavior */ 
 
    overflow: hidden; 
 
    /* this one! */ 
 
    background-color: rgb(0, 0, 0); 
 
    color: rgb(255, 255, 255); 
 
    transition: height 0.3s ease; 
 
} 
 

 
.menu-tab:hover { 
 
    height: 500%; 
 
}

<div id="menu"> 
 
    <div class="menu-tab">Hover here!</div> 
 
    <div class="menu-tab">Or here!</div> 
 
</div>