我希望有两列具有相同高度的居中竞争，无论任何列中填充了多少内容。到目前为止，我实现了这个目标：
<div class="call-outs-container">
<div class="call-out">
<h4> 1</h4>
</div>
<div class="call-out">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam
obcaecati vel, placeat numquam omnis sit consectetur nobis molestias!
Explicabo deserunt placeat numquam omnis.It is a long established fact that
a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-
or-less normal distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. Many desktop
publishing packages and web page editors now use Lorem Ipsum as their
default model text, and a search for 'lorem ipsum' will uncover many web
sites still in their infancy. Various versions have evolved over the years,
sometimes by accident, sometimes
on purpose (injected humour and the like). It is a long established fact
that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-
or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look
like readable English. Many desktop publishing packages and web page editors
now use Lorem Ipsum as their default model text, and a search for 'lorem
ipsum' will uncover
many web sites still in their infancy. Various versions have evolved over
the years, sometimes by accident, sometimes on purpose (injected humour and
the like).</p>
</div>
</div>
.call-outs-container {
max-width: 1400px;
margin: 40px auto 0 auto;
}
.call-out {
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px;
}
@media (min-width: 900px) {
.call-outs-container {
display: flex;
justify-content: space-between;
}
}
.call-out:nth-child(1) {
background-color: #c0dbe2;
flex: 1;
text-align: center;
margin: auto;
}
.call-out:nth-child(2) {
background-color: #cdf1c3;
flex: 5;
}
问题是我希望列与居中内容的高度相同。对第一列使用margin auto，将内容居中，但使其更小。