为什么我的 flexbox 没有根据 box_2 改变它的大小？答案

【问题标题】：Why doesn't my flexbox change its size regarding to box_2?为什么我的 flexbox 没有根据 box_2 改变它的大小？
【发布时间】：2022-10-25 19:20:43
【问题描述】：

伙计们。请问你能帮帮我吗？我只是想知道为什么我的 flexbox 没有将其大小更改为 box_2。我不想使用 px 更改 flexbox 的高度，但我觉得这是处理它的唯一方法。

我的 HTML 和 CSS

body {
    padding: 0;
}

.main__block {
    width: 25%;
    padding: 10px;
    border: solid blue;
}

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


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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="flex-container">
      <div class="main__block box_1">
        <div class="container__element">Hello1</div>
        <p> A ad aperiam beetur, totam veniam voluptate voluptatum.</p>
      </div>
      <div class="main__block box_2">
        <div class="container__element">Hello2</div>
        <span>s tempore vitae! Accusamus aliquam autem consequatur, ea excepturi ipsa nesciunt nisi provident quasi, quos repellat vel veniam veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad aperiam beetur, totam veniam voluptate voluptatum.</span>
      </div>
      <div class="main__block box_3">
        <div class="container__element">Hello3</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad aperiam beetur, totam veniam voluptate voluptatum.</p>
      </div>
  </div>
</body>
</html>

谢谢你的帮助！

【问题讨论】：

你不能那样使用百分比。您将始终出现溢出，因为您设置了初始内容高度的 50%，因此如果文本大于标题，它将始终以更大的结尾

标签： html css flexbox

【解决方案1】：

您必须给父母一个特定的宽度和高度，这就是孩子们将采取的行动。 Flex_container 没有width 或height。

Flex_container{Width:100vw; Height: 100vh;}

你也可以给max-width和max-height。

也给孩子一个背景颜色来看看变化。

【讨论】：