ブログのブログカードをデザインしているのですが、内容物の量によってブログカードの高さが変わってきます。特にchromeのモバイルエミュレータで画面幅を小さくしていくと顕著になります。
ブログのブログカードをデザインしているのですが、内容物の量によってブログカードの高さが変わってきます。特にchromeのモバイルエミュレータで画面幅を小さくしていくと顕著になります。 かといって、pxで高さを固定してしまうと、内容物がはみ出てしまいます。 https://jsfiddle.net/bgegg/fae9g2sb/1/ このような場合、高さはどうやって統一するといいのでしょうか？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Document</title> <style> .main { max-width: 500px; margin: auto; border:3px solid silver; } .article__wrapper { display: flex; flex-direction: column; margin-bottom: 16px; border: 1px solid silver; } .article__header { font-size: 16px; margin: 0; border: 1px solid silver; } .article__description{ border: 1px solid silver; } </style> </head> <body> <div class="main"> <article class="article__wrapper"> <h2 class="article__header"> 記事タイトル </h2> <div class="article__description"> 本文です </div> </article> <article class="article__wrapper"> <h2 class="article__header"> 記事タイトル </h2> <div class="article__description"> 本文です本文です本文です本文です本文です本文です本文です本文です本文です本文です本文です </div> </article> </div> </body> </html>
