overflow: scrollが反映されなかった原因

【目次】

1.overflow:scrollとは
2.原因
3.反省
4.最後に

1.overflow:scrollとは

親要素の表示範囲から、はみ出した子要素が存在する時、はみ出した分に関してはスクロール表示にすることができるというCSSの1つです。overflowというプロパティに対して様々な値を指定することができ、指定した値の種類によって、はみ出した子要素に対してどのような表示形式を指定するか決めることができます。

2.原因

widthとheightを指定していなかった為。（表示範囲を決める記述がなかった為）
「overflow」「効かない」といった単語を並べて検索したがヒットせず、初心者向けのoverflow解説記事を読んでいて気付きました。親要素からはみ出した分についての表示形式を定めるプロパティなのに、親要素のサイズが決まっていなければ、はみ出したかどうかの判定も行われていないのでスクロール表示がされないということですね。

3.反省

1.エラー原因の検索する前に、公式リファレンスや初心者向けの解説記事を読んでみる。

エラーの原因を直接的に探る検索も大切ですが、そもそもプロパティの使い方を1から読み直すこともエラーを解決する上では大切だと思います。私のような初心者のエラーは基本的な使い方に問題のある場合があります。あまりに基本的すぎるエラーは、現象を直接検索してもエラーの事例としてヒットしないことがあると思いました。

2.サイズ指定を忘れがち

検証ツールでサイズ指定していない部分を選択しても、コンテンツの分だけサイズがあるように表示されます。しかし、それはコンテンツを空にすれば表示領域は0になってしまうということです。コンテンツを入力しているとサイズが指定されていると錯覚してしまうことがあるので注意する必要があると感じました。
メモをしていなかったので例を出せませんが、サイズ指定をするだけでCSSが反映されないというエラーを解消できた例を他にも経験した記憶があるので、詰まったらサイズ指定を考えてみるというのも1つの方法かと思いました。

4.最後に

まだまだ初心者で誤った記事を投稿してしまうかもしれないので、変なことを書いている場合は指摘してもらえればと思います。
今後も自分がプログラミングをしていて気付いたことや、エラーの体験談とその解決について投稿していこうと思いますので宜しくお願い致します。