html - 均衡 flexbox 列内元素的高度

Question

我有一个包含多个列的表格。这些列可以包含不同大小的内容，因此高度会有所不同。

我想做的是调整单个元素的高度，使它看起来像这样:

.

.table {
    display: flex;
    background-color: #B2EBF2;
    margin: 0 auto;
    width: 900px;
}

.column {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    width: 33%;
}

.box {
    flex: 1 0 auto;
    padding: 1em;
    box-sizing: border-box;
    border: 1px solid #546E7A;
}

.title {
    font-size: 2em;
    text-align: center;
}

.description {
    text-align: center;
}

img {
    max-width: 100%;
}

    <div class="container">
        <div class="table">
            <div class="column">
                <div class="box title">
                    Test 1
                </div>
                <div class="box description">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
                </div>
                <div class="box image">
                    <img src="http://unsplash.it/300/320" />
                </div>
            </div>
            <div class="column">
                <div class="box title">
                    Test 2
                </div>
                <div class="box description">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
                </div>
                <div class="box image">
                    <img src="http://unsplash.it/300/300" />
                </div>
            </div>
            <div class="column">
                <div class="box title">
                    Test 3
                </div>
                <div class="box description">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
                </div>
                <div class="box image">
                    <img src="http://unsplash.it/300/280" />
                </div>
            </div>
        </div>
    </div>

Answer 1

首先，您应该使用相同尺寸的图像。然后去掉 flex: 1 0 auto;来自 .box，但给出 flex: 1 0 auto;仅限于.description。我希望它能满足您的所有要求。