サイトをコーディングしていて、divにクラスcontainerとし、下記CSSを指定した。
CSS
.container {
height: 600px
}
その中に画像を設置。
しかし、画像の縦幅が600pxを超えており、親要素をはみ出してしまいました。
解決法
下記のプロパティを設定したら解決しました。
CSS
.container {
height: 600px
overflow: hidden; /*overflowプロパティを追加*/
}
overflowプロパティとは
領域内に収まりきらなかった内容を、どう処理するか、を指定するプロパティです。
visivble
領域をはみ出して表示する（デフォルト値）
hidden
はみ出した部分を表示しない 今回適用したのはコレです。
scroll
はみ出した部分は、スクロールバーを出して表示する
auto
自動
まとめ
overflowプロパティは、
テキストの回り込み回避や、floatの解除にも使えるようなので
ぜひとも覚えておきたいプロパティだなと思いました◎