Q&A
前提・実現したいこと
色々なWEBサイトのコードを写経しています
発生している問題・エラーメッセージ
画面サイズを小さくしたら、親に設定したborderをぶち抜けてしまいます
どうしたら直りますか？
該当のソースコード
<html> <head> <style> .container { width: 30%; border: 2px solid #eee; border-radius: 7px; padding: 15px; display: flex; } .avatar { margin-right: 16px; } .comment { word-break: break-all; min-width: 0; } .username { font-weight: bold; margin-bottom: 10px; } .settings { display: flex; justify-content: end; } .settings > span + span { margin-left: 5px; } </style> </head> <body> <div class="container"> <div class="avatar"> <img src="./1703219?size=100" alt> </div> <div class="comment-box"> <div class="username"> aaaaaaa </div> <div class="comment"> テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト <div class="settings"> <span class="edit">編集</span> <span class="delete">削除</span> </div> </div> </div> </div> </body> </html>
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
.containerにflex-wrap: wrap;をかけるか、
.comment-boxにword-break: break-all;をかけて解決するでしょうか。
投稿2018/09/13 09:22
総合スコア14
0
以下のような指定をすればいいのではないでしょうか
font-size: 3vw;
vwというのはviewport width(画面幅)に影響を受ける単位なので、画面サイズを小さくすれば小さく、大きくすれば大きく出来ます。
文字の大きさを変えたくないということであれば、親要素にmin-widthを設定し、突き抜けない程度の下限サイズを設定すれば良いかと思います。
投稿2018/09/12 05:54
総合スコア377
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。