html - css - <pre> 等の縦幅のみを指定する

1.　概要

2.　デフォルトの状態

3.　縦幅を指定する

4.　まとめ

1.　概要

　現在「prism.js」でシンタックスハイライトさせています。

　横幅がはみ出したときは折り返し、縦幅がはみだしたときはスクロール表示したいと考えております。

2.　デフォルトの状態

　ほぼ何も指定なしとして


<pre style="border: solid 1px #000000;">
あいうえおかきくけこ
さしすせそたちつてと
なにぬねのはひふへほ
まみむめもやゆよわをん
</pre>


　と書くと下記のように表示されます。

あいうえおかきくけこ
さしすせそたちつてと
なにぬねのはひふへほ
まみむめもやゆよわをん


3.　幅を指定する


pre
{
	max-width: 6em;
	max-height: 3em;
}


　と書きますと、下記のような表示になります。
　ブラウザによって見え方が異なりそうですが・・・。

あいうえおかきくけこ
さしすせそたちつてと
なにぬねのはひふへほ
まみむめもやゆよわをん

　「Firefox 58.0.2」では下記のように表示されます。

　これを


pre
{
	max-width: 6em;
	max-height: 3em;
	overflow-y: auto;
}


　と書くと

あいうえおかきくけこ
さしすせそたちつてと
なにぬねのはひふへほ
まみむめもやゆよわをん

　となって少なくとも「Firefox 58.0.2」では下記のように縦のスクロールバーが表示されるのです。

4.　まとめ

「HTML クリックリファレンス」では、「overflow-y」は「Internet Exproler」独自の仕様とありますが、「MDN web docs」では、他のブラウザでも対応しているように記述されています。

　少なくとも、「Firefox 58.0.2」は対応しています。
　「iphone 6」上の「Safari」では残念ながら機能していません。

　「overflow-y」に指定できる値は以下の通りです。