html - 防止 flexbox 元素根据段落拉伸(stretch)

<分区>

你好，我是 HTML 和 CSS 的新手，我正在尝试做一个网站来快速学习它。我正在使用 flexbox，但遇到了问题。

起初我的 flexbox 元素大小不一样(例如:Image)，但后来我使用 flex: 1; 修复了它，它看起来像 this .它们的尺寸都相同，但它们都占据了彼此最长的尺寸，但当我做长段落时，它仍然不起作用(例如:Image)。我想以相同的大小独立于段落来制作我的所有元素，当我制作长段落时，我希望它们位于底行(例如:Thats what I'm wanting)。我该怎么做？

抱歉我的英语不好，我的英语不是很好。

*{
    margin: 0px;
    padding: 0px;
}
.container-1 div{
    border: 3px black solid;
    padding: 120px;
    margin-top: 50px;
}
.container-1{
    display: flex;
    justify-content: space-between;
}
.box-1{
    margin-left: 1em;
    flex: 1;
}
.box-2{
    flex: 1;
}
.box-3{
    flex: 1;
    margin-right: 1em; 
}

<div class="container-1">
    <div class="box-1">
        <h3>AAAAA</h3>
        <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
    </div>
    <div class="box-2">
        <h3>AA</h3>
        <p>a</p>
    </div>
    <div class="box-3">
        <h3>AAAAAAAAAAA</h3>
        <p>a</p>
    </div>
</div>

最佳答案

可以添加