実現したいこと
スクロールできるようにしたいです！
発生している問題・分からないこと
スクロールさせるためにappsBlock(クラス)の要素が多いときにオーバーフローさせたいけど、app(クラス)がなぜかサイズが自動調整されてしまう。
問題のコードは下のほうにあります。
該当のソースコード
html
1<!doctype html>2<html lang="ja">3 <head>4 <meta charset="utf-8" />5 <title>スタディハブ</title>6 <link href="Home.JS" type="text/JS">7 </head>8 <body>9 <!--JavaScript-->10 <script src="https://code.jquery.com/jquery.min.js"></script>11 <script src="Home.JS"></script>12 <!--CSS-->13 <style type="text/css">14 * {15 margin:0px;16 padding: 0px;17 } 18 .top_bar{19 background-color: rgb(245, 245, 245);20 width: auto;21 }22 .title{23 padding-left: 10px;24 font-size: 30px;25 }26 .subject{27 font-size: 20px;28 padding-left: 10px;29 font-weight: bold;30 cursor: pointer;31 }32 .hidden{33 display: none;34 }35 .appsBlock{36 background-color: rgb(237, 237, 237);37 height: 120px;38 display: flex;39 align-items: center;40 overflow-x: scroll;41 }42 .app{43 background-color: white;44 width: 100px;45 height: 100px;46 border-radius: 10px;47 display: flex;48 align-items: flex-end;49 text-decoration: none;50 }51 .appsBlock::-webkit-scrollbar{52 display: none;53 }54 .app_title{55 margin: 0 auto;56 color: black;57 }58 </style>59 <!--HTML-->60 <div class="top_bar">61 <p class="title">Home</p>62 </div>63 <div class="subject">数学▽</div>64 <div class="math">65<!--ここから-->66 <div class="appsBlock">67 <p style="width: 10px;"></p>68 <a class="app" href="#"><p class="app_title">アプリ名</p></a>69 </div>70<!--ここまで-->71 </div>72 </body>73</html>
試したこと・調べたこと
上記の詳細・結果
情報を得ることができなかった
補足
特になし
0 コメント