カード型のレイアウトを整えたい

実現したいこと

ここに実現したいことを箇条書きで書いてください。

カード型のレイアウトを整えたい

前提

カード型のレイアウトを作ってます。

発生している問題・エラーメッセージ

値段と薬の説明のところのflex-growがうまく効かなくて高さが合わない

該当のソースコード

HTML
1　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="left">
2							<h5 class="highlighter yokuseizai_title">生物学的製剤</h5>
3							<img src="../assets/images/new_med.jpg" alt="新薬のイメージ">
4						</div>	
5						<div class="am_flex">
6							<div class="medicine">
7								<img src="../assets/images/benrista.webp" alt="ベンリスタの写真" class="medicine_img">
8								<div class="medicine_center">
9									<p class="medicine_kind">生物学的製剤</p>
10									<p>Belimumab<br><span class="medicine_name">ベンリスタ</span></p>
11								</div>
12								<div class="medicine_text_box">
13									<p class="medicine_text">SLEの治療に使用される抗体医薬品で、Bリンパ球刺激因子（BLyS）を標的とします。注射薬。</p>
14									<p class="price">16,616円/120mg１瓶</p>
15								</div>
16							</div>
17
18							<div class="medicine">
19								<img src="../assets/images/sanefro.webp" alt="サフネローの写真" class="medicine_img">
20								<div class="medicine_center">
21									<p class="medicine_kind">生物学的製剤</p>
22									<p>Secukinumab<br><span class="medicine_name">サフネロー</span></p>
23								</div>
24								<div class="medicine_text_box">
25									<p class="medicine_text">膿痂疹の治療に使用されることが一般的ですが、腎炎を伴うSLEの治療に特に効果があります。</p>
26									<p class="price">300mg2ml1瓶<br>96,068円
27										</p>
28								</div>
29							</div>
30
31							<div class="medicine">
32								<img src="../assets/images/ritukisimab.webp" alt="リツキシマブの写真" class="medicine_img">
33								<div class="medicine_center">
34									<p class="medicine_kind">生物学的製剤</p>
35									<p>Rituximab<br><span class="medicine_name">リツキシマブ</span></p>
36								</div>
37								<div class="medicine_text_box">
38									<p class="medicine_text">SLEの治療に使用されるモノクローナル抗体医薬品で、B細胞を標的とします。注射薬。</p>
39									<p class="price">21,609円<br>100mg10ml1瓶</p>
40								</div>
41							</div>
42							<div class="medicine">
43								<img src="../assets/images/akutemura.webp" alt="アクテムラの写真" class="medicine_img">
44								<div class="medicine_center">
45									<p class="medicine_kind">生物学的製剤</p>
46									<p><span class="medicine_name">アクテムラ</span></p>
47								</div>
48								<div class="medicine_text_box">
49									<p class="medicine_text">注射薬。炎症を抑制する、細胞障害を抑制、病気の進行を遅らせる</p>
50									<p class="price">32608円／キット</p>
51								</div>
52							</div>
53						</div>
54

CSS
1.am_flex {
2  display: flex;
3  justify-content: start;
4  flex-wrap: wrap;
5  gap: 2%;
6}
7.medicine {
8  display: flex;
9  flex-direction: column;
10  width: 23%;
11  margin-bottom: 25px;
12}
13.medicine_img {
14  width: 100%;
15  height: 200px;
16  border-radius: 20px 20px 0 0;
17}
18.medicine_center {
19  background-color: #E2B2A9;
20  padding: 10px;
21  width: 100%;
22  height: 120px;
23}
24.medicine_kind {
25  margin: 0;
26}
27.medicine_name {
28  font-weight: bold;
29  font-size: 18px;
30}
31.medicine_text_box {
32  padding: 10px;
33  height: 200px;
34  display: flex;
35  flex-direction: column;
36  border: 3px solid #E2B2A9;
37  border-radius: 0 0 20px 20px;
38}
39.medicine_text {
40  text-align: left;
41  flex-grow: 3;
42}
43.price {
44  margin: 0;
45  flex-grow: 1;
46}

試したこと

medicine_text_boxにdisplay:flexを指定して
medicine_textと.priceにflex-growを指定した。

行動規範の内容に同意します

回答2件

ベストアンサー

値段と薬の説明のところのflex-growがうまく効かなくて高さが合わない

flex-growの設定は効いているとは思いますが、flex-grow: 3; と flex-grow: 1;に設定しているのでどちらも拡張してしまうので中身のテキスト量によって高さが合わなくなります。値段(.price)の方はflex-grow: 0;で拡張しないようにすればどうでしょう。

あと、.medicine_text_box の高さを200pxに固定しているので、テキスト量や画面幅によってはみ出してしまう可能性がありますのでこれは固定しないようにした方がいいでしょう。代わりに、これにflex-grow: 1;を設定して親要素の高さいっぱいまで拡張するようにするといいでしょう。

その他、気になったところを修正したのが下記のCSSです。修正箇所は修正理由はコメントにしてあります。

css
1.am_flex {
2  display: flex;
3  justify-content: start;
4  flex-wrap: wrap;
5  gap: 2%;
6}
7.medicine {
8  display: flex;
9  flex-direction: column;
10  width: 23%;
11  margin-bottom: 25px;
12}
13.medicine_img {
14  width: 100%;
15  height: 200px;
16  border-radius: 20px 20px 0 0;
17 object-fit: cover; /* 画像の変形を防ぐ */
18}
19.medicine_center {
20  background-color: #E2B2A9;
21  padding: 10px;
22/*  width: 100%; 削除 親要素をpadding分はみ出すのを防ぐため */
23  height: 120px;
24}
25.medicine_kind {
26  margin: 0;
27}
28.medicine_name {
29  font-weight: bold;
30  font-size: 18px;
31}
32.medicine_text_box {
33  padding: 10px;
34 /* height: 200px; 高さは固定しない */
35  flex-grow: 1; /* 下に余白がでないように高さを拡張する */
36  display: flex;
37  flex-direction: column;
38  border: 3px solid #E2B2A9;
39  border-radius: 0 0 20px 20px;
40}
41.medicine_text {
42  text-align: left;
43  flex-grow: 1; /* 高さを拡張する */
44}
45.price {
46  margin: 0; /* 高さを拡張しない */
47}