CSS Flexbox设百分比高度不显示，设绝对高度正常原因求助

这个问题其实是CSS百分比高度的常见陷阱，我来给你拆解一下：

核心原因：百分比高度依赖父元素的明确高度 #

CSS里，当你给元素设置height: X%时，这个百分比是相对于父元素的计算高度来计算的。但你的.flexContainer的父元素是<body>，而默认情况下：

• <html>和<body>的高度是由内容撑开的，不是自动占满浏览器视口
• 你的.flexContainer里的子元素（.flexElmContainer、.flexElm）都是用百分比高度，没有实际内容，所以<body>的高度会被计算为0
• 0的50%还是0，自然.flexContainer就没有高度，页面显示为空

而当你给.flexContainer设置固定数值（比如height:300px）时，容器有了明确高度，子元素的百分比高度就能基于这个高度计算，所以内容能正常显示。

解决方法 #

要让height:50%生效，你需要给父链上的html和body设置明确的高度，让它们占满视口：

/* 先给html和body设置全高 */
html, body {
  height: 100%;
  margin: 0; /* 清除默认边距，避免出现滚动条 */
}

.flexContainer{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content: space-between;
  box-shadow: 3px 1px 4px 0px black;
  height:50%; /* 现在这个50%是视口高度的一半 */
  width:90%;
}

/* 以下样式保持不变 */
.flexElmContainer {
  width:50%;
  display:flex;
}

.flexElmContainer:nth-of-type(1n) > .flexElm{
  background-color: #3498DB;
  transform:rotate(30deg);
  width:50%;
  height:50%;
  margin:auto;
}

.flexElmContainer:nth-of-type(2n) > .flexElm{
  background-color: #E74C3C;
  transform:rotate(30deg);
  width:50%;
  height:50%;
  margin:auto;
}

替代方案：使用视口单位vh #

如果你不想依赖父元素的高度设置，也可以用vh单位（视口高度的百分比），直接让容器高度等于视口的50%：

.flexContainer{
  /* 其他样式不变 */
  height:50vh; /* 50% of viewport height */
}

这种方式不需要给html/body设置高度，更直接。

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