訳あってdisplay: table-cellのまま横幅いっぱいにしたいけど、なぜかwidth: 100%を指定しても効かないということがあったので、解決策を紹介します。
width:100%にならない原因
そもそもの原因は親要素にdisplay: tableが指定されていないからです。
親要素にdisplay: tableを指定し、その子要素にdisplay: table-cellを指定するのが一般的な使い方で、この通りに指定すれば子要素は勝手にwidth: 100%まで伸びます。
というわけで、親要素にdisplay: tableを指定しましょう。
親要素にdisplay: tableを指定しても治らない場合はそもそも親要素の幅が狭い可能性があるので、親要素にwidth: 100%を指定しましょう。すると子要素も勝手に100%まで伸びます。
display: tableを指定して崩れてしまった場合
親要素にdisplay: tableを指定したら崩れてしまった、もしくは子要素にすでに指定されているdisplay: table-cellを外すと崩れてしまうのでいじるにいじれない…という場合に多少無理やりですが直す方法があります。
その方法はdisplay: table-cellの要素に「これならwidth: 100%以上の幅があるでしょ」という値を指定することです。width: 9999pxとかですね。
display: table-cellの要素はどれだけ大きい幅を指定しても絶対に親要素をはみ出ない法則があるみたいです。width: 9999pxとかwidth: 10000vwとか指定しても絶対に親要素からはみ出ません。不思議ですね…
ただ、他の人が見た時「なにこれ…」ってなる可能性があるのでその辺は気をつけてください。
まとめ
少し古いサイトの改修をしていてdisplay: table-cellの要素を100%にしたかったのでこの記事を書いてみました。
こういう場合はあまりないかもしれないですが、古いサイトだと何書いてるかよくわからない箇所とかたまにあるので、気をつけたいですね。
