overflow-x:hiddenで上下左右非表示になってしまう

前提・実現したいこと

横だけはみ出したくない要素にoverflow-x:hiddenを指定したところ、
縦のはみ出した部分まで非表示になってしまいます。
またoverflow-x:scrollと指定した場合も縦が非表示になります。
しかし、overflow-y:hiddenもしくはoverflow-y:scrollと指定した場合は、
横は隠されずにちゃんと縦だけに効果が適用されています。
また、別の部分でposition:stickyを使用しているので、
bodyにoverflow-x:hiddenを適用することが出来ません。

これは何をしても回避出来ない仕様なのでしょうか?
もし詳しい方がいらしたらご教授お願い致します。

追記：ソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Document</title>
6<style>
7    *{
8        margin: 0;
9        padding: 0;
10    }
11.abc {
12    width: 100%;
13    height: 300px;
14    background: blue;
15}
16.aaa {
17    width: 100%;
18    height: 500px;
19    background: #000;
20    overflow-x: hidden;
21}
22.bbb {
23    width: 100%;
24    height: 200px;
25    margin-top: -100px;
26    background: red;
27}
28.ccc {
29    width: 100%;
30    height: 200px;
31    margin-left: 10%;
32    background: #ccc;
33}
34</style>
35</head>
36<body>
37<div class="abc"></div>
38<div class="aaa">
39  <div class="bbb">
40    <div class="ccc">この部分を横は隠して縦はスクロールバーをつけずそのまま表示させたい</div>
41  </div>
42</div>
43</body>
44</html>

kogure

2018/01/25 05:26

こんにちは。もう少し具体的に、コードなど記載いただければお力になれるかと思います。

kihara

2018/01/25 06:30

ありがとうございます。元のコードを細かく書くと膨大な量になってしまうので大まかに書かせていただきました。

dit.

2018/01/25 06:37

widtnはwidthのタイポでしょうか

sk_3122

2018/01/25 06:50 編集

ソースを貼る時は、できれば「そのままコピペすれば現象を再現できるソース」を貼り付けると回答が付きやすいです（元のソースそのままではなくても良いのですが、とりあえず現象が再現する状態が良いです）。提示されたソースをひとまずコピペしてみましたが、これはどうなるのが理想形なのでしょうか。class="b" の部分にああああ... と長い文字列を入れてみたら縦スクロールバーが出ましたが、どうなるのが理想形なのでしょうか。（まず class="b" の部分に長いテキストを入れるので良いの？）

sk_3122

2018/01/25 06:48

あとブラウザとか書いたほうが良いかも。上記は windows10/chrome で試しました。

kihara

2018/01/25 10:28

widthはタイプミスです。ご指摘ありがとうございます。

kihara

2018/01/25 10:29

ブラウザは windows10/chromeです。コードをそのまま試せるように修正させていただきました。

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

回答2件

ベストアンサー

これは何をしても回避出来ない仕様なのでしょうか?

という質問への回答を示しますと、結論としては「出来ない仕様」ということになります。

CSS Overflow Module Level 3の仕様書によると、「overflow-xとoverflow-yのどちらかがvisible以外に指定されていると、もう片方はvisibleを指定しても、内部ではautoとして扱う」ということになっています。

その結果、overflow-xとoverflow-yによって、横だけ、もしくは、縦だけを見えなくするということは出来ない、ということになります。なお、overflow-x, overflow-yの初期値はvisibleですので、片方だけvisible以外に指定してもう片方には何も指定しない場合も、同様の結果になります。

投稿2018/01/25 20:58

othersight

総合スコア356

解決した済になってましたが一応。
wrapper を追加して対応してみましたがこうではない？

要件を読み違えていたらごめんなさい

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
.abc {
    width: 100%;
    height: 300px;
    background: blue;
}
.aaa {
    width: 100%;
    height: 500px;
    background: #000;
    /* overflow-x: hidden; */ /* ★この指定はやめ */
}
.bbb {
    width: 100%;
    height: 200px;
    margin-top: -100px;
    background: red;
}

/*
  ★cccの上に1つdivをかませた。
    このラッパーのoverflow-x:hiddenがないと、cccがmargin-leftの分だけ右に飛び出してしまったので追加した。
*/
.ccc-wrapper {
    overflow-x: hidden;
}
.ccc {
    width: 100%;
    height: 200px;
    margin-left: 10%;
    background: #ccc;

    /* ★これを追加 */
    overflow-x: hidden;  
    overflow-y: hidden;

    /* ★一行が長い場合に右端で折り返しさせたくない場合は nowrap を指定する。折り返しても良い場合は以下の指定を削除 */
    white-space: nowrap;
}
</style>
</head>
<body>
<div class="abc"></div>
<div class="aaa">
  <div class="bbb">
    <div class="ccc-wrapper">
      <div class="ccc">１１１<br>２２２<br>３３３<br>４４４<br>５５５<br>６６６<br>height:200pxを超える部分は隠れてしまって良いの？<br>この部分を横は隠して縦はスクロールバーをつけずそのまま表示させたい<br>これが最終行です</div>
    </div>
  </div>
</div>
</body>
</html>

違うかな。まあ参考までに～

追記：
今回の例だと wrapper 要らなかったかな･･･と思ったので書いておきます。
蛇足かもですが一応。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
.abc {
    width: 100%;
    height: 300px;
    background: blue;
}
.aaa {
    width: 100%;
    height: 500px;
    background: #000;
    /* overflow-x: hidden; */ /* ★この指定はやめ */
}
.bbb {
    width: 100%;
    height: 200px;
    margin-top: -100px;
    background: red;
}

.ccc {
    /* width: 100%; */ /* ★divなのでwidth100%は要らない。width:100%がなければwrapperがなくても横に飛び出さない */
    height: 200px;
    margin-left: 10%;
    background: #ccc;

    /* ★これを追加 */
    overflow: hidden;

    /* ★一行が長い場合に右端で折り返しさせたくない場合は nowrap を指定する。折り返しても良い場合は以下の指定を削除 */
    white-space: nowrap;
}
</style>
</head>
<body>
<div class="abc"></div>
<div class="aaa">
  <div class="bbb">
      <div class="ccc">１１１<br>２２２<br>３３３<br>４４４<br>５５５<br>６６６<br>height:200pxを超える部分は隠れてしまって良いの？<br>この部分を横は隠して縦はスクロールバーをつけずそのまま表示させたい<br>これが最終行です</div>
  </div>
</div>
</body>
</html>

投稿2018/01/26 01:28

編集2018/01/29 01:12

sk_3122

総合スコア1126