为何我的flexbox无法随box_2自动调整尺寸？

你的问题核心是flex子元素.main__block没有明确的高度基准，导致内部.container__element的height:50%无法生效，同时需要确保flex容器自动适配最高子元素的高度。按以下方式修改代码即可解决：

1. 给.main__block添加flex垂直布局，让内部元素能基于父元素高度计算百分比：

.main__block {
    width: 25%;
    padding: 10px;
    border: solid blue;
    display: flex;
    flex-direction: column;
}

2. 给.container__element添加flex-shrink: 0，避免它被下方文本内容挤压变形：

.container__element {
    height: 50%;
    background-color: white;
    flex-shrink: 0;
}

3. （可选）让.main__block内的文本元素自动填充剩余空间，避免内容间距混乱：

.main__block p, .main__block span {
    flex-grow: 1;
    margin-top: 10px;
}

修改后的完整CSS代码：

body {
    padding: 0;
}

.main__block {
    width: 25%;
    padding: 10px;
    border: solid blue;
    display: flex;
    flex-direction: column;
}

.flex-container {
    display: flex;
    background-color: green;
    justify-content: space-around;
    padding: 0;
}

.container__element {
    height: 50%;
    background-color: white;
    flex-shrink: 0;
}

.main__block p, .main__block span {
    flex-grow: 1;
    margin-top: 10px;
}

这样修改后，flex容器会自动适配.box_2的高度，.container__element也能准确占据每个.main__block高度的50%，完全不需要用固定px值设置高度。

内容的提问来源于stack exchange，提问作者ArtemBohak