如何使三个容器长成相同的大小?

Question

所以我正在使用HTML, CSS和FLEXBOX构建一个3列预览卡。我使用移动优先的方法来构建它。它开始是一列，但是当它被展开，达到一定的维数时，它就变成了一行。我遇到的问题是，当容器转换成一行时，它们会以不同的大小增长。它们的高度不同，有些会变成柱子，有些会比其他柱子高。我如何确保它们都以相同的速度生长?我如何确保一列在展开时不会比另一列大?我尝试将flex-grow设置为1，并将flex-shrink设置为1，但它不起作用。请在下面找到我代码的相关部分。

这是一个链接到我的网站的实时版本

body {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
--The panel is the container as a whole--
.panel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border: 1px solid white;
border-radius: 10px;
width: 100%;
max-width: 960px;
height: 100%

}
--I am styling each column below--
.panel  section {  
display: flex;
padding: 2.5rem;
flex-direction: column;
text-align: left;
border-bottom: none;
height: 100%;

@media only screen and (min-width: 560px) {
.panel {
display: flex;
flex-direction: row;
border-radius: 10px ;
width: 80%;
height: 100%;
}
.panel  section {
height: 100%;
}
}

Answer 1

从子元素中删除height: 100%，只是简单地将桌面的align-items更改为stretch，这将创建相等高度的列。

Answer 2

可以有不同的方法来解决这个问题

问题:由于这个错误发生。如果三个容器的内容量之间的差异是中间的内容更多，那么你就告诉了更多关于suv的内容。这就是原因

解决方案:你可以让内容几乎相等或者可以让容器的高度更大这样内容就可以很容易地容纳

• 内容相等，内容固定高度-不太兼容，因为内容可以根据需要变化
• 增加容器高度-使用硬代码(400px;30em)，可根据内容的需要增加容器的高度。你可以定位btn在底部使用absolute位置。这样它的高度就相等了

@media only screen and (min-width: 560px)
.panel section {
height: 30em;
position: relative;
}

.general-button {
background-color: var(--major-color);
border-radius: 5rem;
padding: 0.89rem;
margin: 1.1em 0;
border: none;
width: 8rem;
position: absolute;
bottom: 0;
}