CSS FlexBox布局内卡片中p标签嵌入文本无法正常显示问题求助

问题根因 #

你的样式中使用了.flex-container>div子代选择器，给所有flex容器的直接子div统一设置了line-height: 70vh属性，该属性会自动继承给所有后代元素，而你用于存放文本的绿色卡片.amount-card高度仅为70px+padding，远小于70vh的行高，因此文本会偏移到卡片外部。

解决方案 #

两种常用修改方式二选一即可：

方案1：重置卡片内部行高 #

给.amount-card添加行高重置规则，覆盖继承的70vh属性：

.amount-card {
  width: 70%;
  height: 70px;
  max-width: 100px;
  border-radius: 5px;
  margin: 5px auto 0 auto;
  padding: 1.5em;
  background-color: green;
  text-align: center;
  /* 新增下面这行，行高可按需求调整，normal为默认行高 */
  line-height: normal;
}

方案2：缩小全局行高的生效范围 #

删除.flex-container>div中的line-height: 70vh规则，只给需要该样式的元素（比如右侧的transaction-card）单独设置：

.flex-container>div {
  background-color: #f1f1f1;
  margin: 10px;
  font-size: 30px;
  /* 删掉全局的line-height:70vh */
}

.transaction-card {
  width: 700px;
  /* 单独给需要的元素加行高 */
  line-height: 70vh;
}

修改后绿色卡片内的文本会正常在卡片内部显示。

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