CSSでスクロールを一方向のみにするにはどうすればよいですか？

Question

私はいくつかのサイズ変更要素を持つリストを持っています。要素のサイズが変更されると、x方向にコンテナがオーバーフローするはずです。 x方向にスクロールしてはいけません。スクロールはy方向で有効にする必要があります。

私が試してみました設定：

overflow-x: visible; 
overflow-y: scroll; 

は、しかし、これは両方の方向にスクロールを有効にするようです。

どうすればよいですか？

https://jsfiddle.net/64tw8rqe/

---

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issueへの回答は、根本的な問題ではなく、回避策scrollの場合を説明します。

---

この動作はthe specに従います。私は回避策を探しています。

Answer 1

問題はoverflow-x: visible; overflow-y: scrollはCSSで不可能組み合わせであるということです。 visibleがscrollとペアになるたびにautoに変換されます。言い換えれば、これらは同等です：

overflow-x: visible; 
overflow-y: scroll; 

overflow-x: auto; 
overflow-y: scroll; 

これは仕様には劣っていますが、回避策があります。

拡大要素position: absoluteを作成すると、そのサイズはコンテナを変更しないで、overflow: hiddenによって切り捨てられません。それらを正しく配置するには、divとposition: relativeの余分なものをコンテナ全体に巻き付けます。

HTML：

<div class='container1'> 
    <div class='container2'> 
    <ul class='messages'> 
     <li><pre>Hello</pre></li> 
     <li> 
     <pre>This is a 
     really really really 
     really really long message.</pre> 
     </li> 
     <li><pre>World</pre></li> 
    </ul> 
    </div> 
</div> 

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

.container1 { 
    position: relative; 
    width: 200px; 
} 

.container2 { 
    background: #f0f; 
    width: 100%; 
    height: 100%; 
    overflow: scroll; 
} 

.messages { 
    overflow: visible; 
    list-style: none; 
} 

.messages li { 
    background: #ff0; 
    width: 100%; 
    height: 24px; 
    margin-top: 12px; 
} 

.messages li pre { 
    position: absolute; 
    display: inline-block; 
    box-sizing: border-box; 
    width: 100%; 
    max-height: 24px; 
    padding: 4px; 
    background: #0ff; 
    border-radius: 4px; 
    line-height: 16px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: auto; 
    min-width: 100%; 
    max-width: 100%; 
    transition: max-width 200ms ease-out, height 200ms ease-out; 
} 

.messages li pre:hover { 
    z-index: 1; 
    background: #00f; 
    max-width: 80vw; 
    max-height: 80vh; 
    transition: max-width 200ms ease-in, max-height 200ms ease-in; 
} 

フィドル：ここで見つけるトリックへ

https://jsfiddle.net/cyL6tc2k/2/

クレジット：http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent

Answer 2

オーバーフロー-Yを変更してみてください：

Answer 3

隠さこれは、一部のブラウザではいくつかのデフォルト値を持っている「プレ」の使用状況、によるものである：

pre { 
     display: block; 
     font-family: monospace; 
     white-space: pre; 
     margin: 1em 0; 
    } 

あなたは2つのオプションがあります。すべての変更「P」（段落）による「前」またはこれを追加することで、前のホワイトスペースのプロパティを書き換える：あなたは、縦型オーバーフローを持っている場合

pre { white-space: normal; } 

Answer 4

、スクロールバー（右に）水平流に追加されます。要素がスクロールバーをオーバーレイしないので、ブラウザはオーバーフロー設定を変更して、代わりに水平方向にスクロールします。

何をする必要があるでしょうが、すべてのコンテンツの周りに別のコンテナを追加して、内部のオーバーフローコンテンツのすべてが、内部要素と垂直スクロールの高さという大きな幅を持っていることを設定している：

HTML

<div class='container3'><!-- Add a parent container --> 
    <div class='container'> 
    ... 
    </div> 
</div> 

CSS

/* A parent container */ 
.container3 { 
    /* The maximum height of your inner content before scrolling is enabled */ 
    height: 200px; 

    /* Enable the vertical scroll if we have enough content */ 
    overflow-y: auto; 
} 

FIDDLE

https://jsfiddle.net/cL8hr7ot/