高さが均等になるように要素を並べる

高さが均等になるように要素を並べる。

・flex: 1を使うことで各要素の高さが均等になる

.parent {
    display: flex;
    justify-content: center;
}

.item {
    display: flex;
    flex-direction: column;
    background-color: cadetblue;
    margin: 0 8px;
    padding: 8px;
}

.item p {
    flex: 1;
}

import React from 'react'
import './Hoge.css'

export const Hoge = () => {
    return (
        <>
            <div className="parent">
                <div className="item">
                    <p>aaaaaaaaaaaaaaaaa</p>
                    <button>button</button>
                </div>
                <div className="item">
                    <p>aaaaaaaa<br />aaaaaaaaa</p>
                    <button>button</button>
                </div>
                <div className="item">
                    <p>aaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaaa<br />aaaaaaaa<br />aaaaaaaaaaa</p>
                    <button>button</button>
                </div>
                <div className="item">
                    <p>aaaaaaaaaaaaaaaaa</p>
                    <button>button</button>
                </div>
            </div>
        </>
    )
}

結果