Q&A
overflow: scroll;
で左上方向へ溢れた領域もスクロールで表示させたいです。
どのようにすればいいでしょうか。
html
1 2<body> 3 4 <div class="parent"> 5 <div class="child">あ</div> 6 </div> 7 8</body> 9
css
1body { 2 width: 100vw; 3 height: 100vh; 4 background-color: antiquewhite; 5 display: flex; 6 align-items: center; 7 justify-content: center; 8 margin: 0; 9} 10 11.parent { 12 position: relative; 13 width: 200px; 14 height: 200px; 15 background-color: aquamarine; 16 margin: 0; 17 overflow: visible; 18} 19 20.child { 21 width: 200%; 22 height: 200%; 23 position: absolute; 24 left: -100px; 25 top: -100px; 26 border: solid 1px black; 27 font-size: 400px; 28 display: flex; 29 align-items: center; 30 justify-content: center; 31}
このようなparentとchildの位置関係で、溢れたchildをスクロールで表示させてあげたいです。
しかし、parentのoverflow: visible;をscrollやautoにすると、上方向、あるいは左方向に溢れた領域を表示させられないです...
どのようにすればいいでしょうか
回答1件
0
ベストアンサー
css
1left: -100px; 2top: -100px;
で指定しているからなので、ここを外せば範囲内でスクロールできるかと。
投稿2018/10/12 10:38
総合スコア5158
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/10/12 10:47
2018/10/12 10:54
退会済みユーザー
2018/10/12 11:28
2018/10/12 11:30