flexboxを使用して横並びになったコンテンツの高さを揃えたい

初めまして。
レイアウトがうまくいかないところがあり、行き詰っていますのでご教授いただけますと大変助かります。

前提・実現したいこと

flexボックスを使って、コンテンツの高さを揃えたい。

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

display:flexを指定してもコンテンツの高さが揃わず困っています。
何か記述が足りないのでしょうか…。

該当のソースコード

-----HTML------

<div class="works-list"> <div class="works-content"> <div> <img src="" alt="works"> </div> <div class="works-text"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </div> <div class="works-content"> <div> <img src="" alt="works"> </div> <div class="works-text"> <p>テキストテキストテキストテキスト</p> </div> </div> <div class="works-content"> <div> <img src="" alt="works"> </div> <div class="works-text"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </div> </div>

--------------css-----------------------
.works-list{
@media(min-width: 769px){
display: flex;
justify-content: space-between;
max-width: 1000px;
}
}

.works-content{
width: 70%;
margin: 0 auto 3rem;
display: flex;
flex-direction: column;
@media(min-width: 769px){
width: 30%;
}
}

.works-text{
padding: 2.5rem 2rem;
display: flex;
align-items: center;
background-color: #fff;
p{
margin: 0;
}
}

試したこと

子要素に対してもflexを指定した

Lhankor_Mhy

2021/02/16 05:59

CSSとしては文法的におかしいと思いますが、scssということでいいですか？

Lhankor_Mhy

2021/02/16 06:00

Markdownを使ってください。ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1

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

回答1件

ベストアンサー

下記のようなことでしょうか。

scss
1.works-text{
2  padding: 2.5rem 2rem;
3  display: flex;
4  align-items: center; /* お好みで flex-start に */
5  background-color: #eee;
6  height: 100%; /* 追加 */
7  p{
8    margin: 0;
9  }
10}