ホバリングのコンテナの外側にあるdivにコンテンツを展開します

Question

私はdivを持っています。オーバーフローが非表示にする必要があります。

ユーザーがdivの上に置いたときにしかし、それは内容に合わせて拡張する必要があります。必要に応じて、コンテナの上に重ねる必要があります。コンテナdivは展開しないでください。 divの右上はページ上の同じ位置にとどまるべきです。

私はposition: relative、さまざまな浮動小数値などを試しましたが、運がありませんでした。

このレイアウトはどのように達成できますか？

Answer 1

ご質問はよく分かりませんが divに固定幅と固定高さがありますか？

div{ 
    width:200px; 
    height:50px; 
    overflow:hidden; 
} 
div:hover{ 
    width:200px; 
    height:auto; 
    overflow:auto 
} 

Answer 2

div内に内容（段落など）を絶対に配置する必要があります。

ホバー上で高さとオーバーフローを修正します。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    width: 200px; 
 
    margin: 2em auto; 
 
    height: 1.2em; 
 
    position: relative; 
 
    overflow: hidden; 
 
    border: 1px solid grey; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 
div p { 
 
    text-align: left; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: pink; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 
div:hover { 
 
    overflow: visible; 
 
} 
 
div:hover p { 
 
    height: auto; 
 
    white-space: normal 
 
}

<div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, maxime.</p> 
 
</div>