为何Flexbox容器高度超出子元素？如何让Card仅适配内容高度

核心原因：你的.main容器是flex布局，默认的align-items: stretch会让所有flex子元素自动拉伸至容器的高度，这就是card撑满main高度的原因。

下面是两种可行的解决方案：

方案一：修改main容器的对齐方式 #

给.main添加align-items: flex-start，让所有子元素顶部对齐，高度自适应内容：

.main {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  background-color: brown;
  align-items: flex-start; /* 新增这一行 */
}

方案二：单独设置card的对齐行为 #

如果只想让card不被拉伸，其他子元素保持默认的拉伸效果，可以给.card添加align-self: flex-start：

.card {
  display: flex;
  margin: 20px;
  background-color: orange;
  align-self: flex-start; /* 新增这一行 */
}

完整代码示例（以方案一为例） #

html,
body {
  margin: 0;
  height: 100dvh;
  background-color: darkkhaki;
}

.wrapper {
  display: flex;
  flex-direction: column;
  margin: auto;
  max-width: 1000px;
  background-color: aqua;
  height: 100dvh;
}

.header {
  display: flex;
  height: 100px;
  background-color: purple;
}

.menu {
  display: flex;
  height: 30px;
  background-color: blue;
}

.main {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  background-color: brown;
  align-items: flex-start;
}

.card {
  display: flex;
  margin: 20px;
  background-color: orange;
}

.footer {
  display: flex;
  height: 100px;
  background-color: green;
}

<div class="wrapper">
  <div class="header">
    Header
  </div>
  <div class="menu">
    menu
  </div>
  <div class="main">
    main
    <div class="card">
      my card
    </div>
  </div>
  <div class="footer">
    footer
  </div>
</div>

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