margin-top:auto が効かない。

Question

margin-top:auto;

を指定しても効かないです。どなたかお助け願います。

<section>
        <div class="box-contents">
            <div>
                <img src="img/3213585_m.jpg" alt="">
            </div>
            <h1>テスト見出し</h1>
            <p>テストテストテストテストテスト</p>
            <p class="top">【続きを読む】</p>
        </div>
        <div>
            <div class="box-contents">
                <img src="img/3213585_m.jpg" alt="">
            </div>
            <h1>テスト見出し</h1>
            <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
            <p class="top">【続きを読む】</p>
        </div>
        <div>
            <div class="box-contents">
                <img src="img/3213585_m.jpg" alt="">
            </div>
            <h1>テスト見出し</h1>
            <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
            <p class="top">【続きを読む】</p>
        </div>
    </section>

body {
	width: 90%;
	margin: 0 auto;
}

section {
	display: flex;
	justify-content: space-between;
	gap: 0 20px;
}
section  img {
	width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 4/3;
}
.box-contents {
	display: flex;
	flex-direction: column;
}
.top{
	margin-top: auto;
}

続きを読む　の部分を一番下にauto等で下げたいです。

Comments

[hatena19]

コードは画像ではなく、実際のものをコピーして貼り付けてください。その際、マークダウン書式のコードブロック内に入れてください。（メニューから簡単にできます。）

また、PHPコードではなく、実際に出力されたHTMLコードを提示された方が動作確認しやすいので、回答も付きやすくなると思います。

[roshinante]

ありがとうございます。修正してみました。
こちらでどうでしょうか？
また修正あれば言ってください。