overflow-y:autoにしたいが、overflow-xはデフォルトのままにしたい

タイトル通り

上下のoverflowはautoにして、左右は動かさないようにしたいです。

前提・実現したいこと

今、やりたいことは、長方形のボックスの中に、いくつかのカードをリストみたいに表示している。またそのカードをほかのボックスにドラッグすることができる。

■■な機能を実装中に以下のエラーメッセージが発生しました。

そこで、ボックスの上下はカードが多くなると、スクロールするように以下のようにcssで設定し、上下はできるようになっていますが。
ただ、その影響で左右方向にほかのボックスにドラッグする際に、スクロールが出てくる状態になっている。

該当のソースコード

html
1<div class="contentBox">
2  <div class="cardList">
3  (カード形式の情報がリストになってる)
4  </div>
5</div>

css
1//cardList
2      overflow-y:auto;(←このように、上下のスクロールのみを指定）
3      border:1px solid lightgray;
4      background-color: #9f9fa0;
5      position:relative;
6      top:-16px;
7      width:280px;
8      height:750px;
9      border-bottom-left-radius:15px;
10      border-bottom-right-radius: 15px;
11  }
12//contentBox
13    box-sizing: border-box;
14    min-height:40px;
15    padding-left:50px;
16    padding-top:30px;
17    width:100%;
18    height:730px;

どこが間違っているのでしょうか、ご指摘いただけると光栄ですorz

s8_chu

2018/07/27 10:19

もしよければ、質問者さんの記述した問題が再現するソースコードを追記していただけませんか？

yoshinavi

2018/07/27 23:16

「overflow-x:hidden;」を設定している要素自体が表示画面を超えている可能性もあるので、HTML・CSSのコードを提示されると、より良い回答を得れると思います。

行動規範の内容に同意します

回答2件

もう終わったと思って放置していたのですが「まだ回答を求めています」とのことなので、根拠を述べましょう。
https://drafts.csswg.org/css-overflow-3/#overflow-properties

as specified, except with 'visible'/'clip' computing to 'auto'/'hidden' (respectively) if one of 'overflow-x' or 'overflow-y' is neither 'visible' nor 'clip'

overflow-x、overflow-y のいずれかが visible でも clip でもない場合、visible/clip はそれぞれ auto/hidden と計算されます。

つまり、overflow-y: auto; と指定すれば、overflow-x も auto になります(初期値がvisibleのため)

投稿2018/08/29 05:33

編集2018/08/29 06:24