divの水平スクロールバーを削除するにはどうすればよいですか？

を設定するとoverflow: scroll、水平スクロールバーと垂直スクロールバーが表示されます。

divの水平スクロールバーを削除する方法はありますか？

overflow-x: hidden;

書くことを忘れないでください overflow-x: hidden;

コードは次のようになります。

overflow-y: scroll;
overflow-x: hidden;

を使用するoverflow-y: scrollと、垂直スクロールバーは、必要がなくても常に表示されます。yスクロールバーを必要なときにだけ表示したい場合は、次のように機能します。

.mydivclass {overflow-x: hidden; overflow-y: auto;}

CSS

overflow-y: scroll;

jsFiddleで確認してください。

プロパティ-yからを削除するoverflow-yと、水平スクロールバーが表示されます。

このコードをCSSに追加します。水平スクロールバーを無効にします。

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

スクロールしない（xまたはyを指定しない）：

.your-class {
   overflow: hidden;
}

水平スクロールを削除します。

.your-class {
   overflow-x: hidden;
}

垂直スクロールを削除します。

.your-class {
   overflow-y: hidden;
}

水平スクロールバーを非表示にするには、必要なdivのスクロールバーを選択して、 display: none;

注意すべき点の1つは、Mozillaにはそのようなオプションがないため、これはWebKitベースのブラウザー（Chromeなど）でのみ機能することです。

スクロールバーを選択するには、 ::-webkit-scrollbar

したがって、最終的なコードは次のようになります。

div::-webkit-scrollbar {
  display: none;
}

水平スクロールバーを削除するには、次のコードを使用します。100％動作します。

html, body {
    overflow-x: hidden;
}

水平にあふれているものがなければ、次のように使用することもできます

overflow: auto;

スクロールバーは必要なときにのみ表示されます。

CSS Overflowプロパティを参照してください

使用する：

overflow: auto;

これは垂直スクロールバーを表示し、垂直オーバーフローがある場合のみ表示されます。それ以外の場合は非表示になります。

xとyの両方のオーバーフローがある場合、xとyの両方のスクロールバーが表示されます。

x（水平）スクロールバーを非表示にするには、存在する場合でも、単に追加します。

overflow-x: hidden;

body {
    font-family: sans-serif;
}

.nowrap {
    white-space: nowrap;
}

.container {
    height: 200px;
    width: 300px;
    padding 10px;
    border: 1px solid #444;

    overflow: auto;
    overflow-x: hidden;
}

<div class="container">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li class="nowrap">Item 8 and some really long text to make it overflow horizontally.</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
</ul>
</div>

を非表示にするscrollbarが、動作は維持します。

div::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

これには制限があります。

• https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

このコードのチャンクを使用してください。

.card::-webkit-scrollbar {
  display: none;
}

使用しているところに問題がありました

overflow: none;

しかし、CSSがあまり好きではなく、CSSが思い通りに機能しないことはわかっていました。

ただし、これは完璧な解決策です。私のコンテンツが意図したものより大きくなることは想定されておらず、これにより私が抱えていた問題が修正されました。

overflow: auto;