如何移除Flex布局计算器中.result与.btn元素间的空白间隙？

问题出在你给.kalkulator下的所有子div都设置了flex-grow:1，包括.result。这会让flex布局把父容器的50vh高度按所有子元素的flex-grow比例分配，导致.result的height:10vh被覆盖，最终和按钮之间出现间隙。

解决方法 #

方法1：精准选择按钮元素

修改CSS，把针对所有子div的样式只应用到.btn，避免影响.result：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  margin: 0 auto 5vh;
  background-color: gray;
  text-align: center;
}

.kalkulator {
  display: flex;
  flex-wrap: wrap;
  height: 50vh;
  width: 30vw;
  margin: 0 auto;
}

.kalkulator .result {
  flex-basis: 100%;
  height: 10vh;
  background-color: #333;
  /* 如果不需要.result的边框，加上下面这行 */
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 只对.btn应用flex和border样式 */
.kalkulator .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-basis: 33%;
  background-color: #666;
  border: 1px solid black;
}

.btn:nth-last-child(2),
.btn:nth-last-child(1) {
  flex-basis: 50%;
}

方法2：覆盖.result的flex-grow属性

如果你不想修改选择器，可以在.result的样式里显式设置flex-grow:0，阻止它参与高度分配：

.kalkulator .result {
  flex-basis: 100%;
  height: 10vh;
  background-color: #333;
  flex-grow: 0; /* 关键：不让.result拉伸高度 */
  border: none; /* 可选：去掉.result的边框 */
}

这样修改后，.result会保持10vh的固定高度，剩下的空间会被按钮填满，两者之间的空白间隙就会消失。

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