Flex容器高度100%、宽度50%不生效及文本对齐问题求助

问题一：flex容器尺寸不符合设计预期 #

• 首先要确保html、body以及flex容器的直接父元素设置明确高度，因为height:100%需要依赖父级的高度值才能生效：

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  

• 外层容器必须设置display:flex，才能让两个子容器并排，同时给子容器添加box-sizing:border-box，避免内边距、边框挤占宽度，确保width:50%精准生效：

  .flex-parent {
    display: flex;
    height: 100%;
    width: 100%;
  }
  .flex-parent > div {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
  }
  

问题二：ID-application容器内文本对齐异常 #

• 给该容器设置垂直居中和文本左对齐的组合样式，用flex布局实现垂直居中，同时指定文本水平左对齐：

  .ID-application {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直方向居中 */
    align-items: flex-start; /* 子元素水平左对齐 */
    padding: 0 1.5rem; /* 可选：添加内边距避免文本贴容器边缘 */
  }
  /* 针对内部文本元素补充样式，确保对齐生效 */
  .ID-application * {
    text-align: left;
    margin: 0.5rem 0; /* 调整行间距提升可读性 */
  }
  

• 若样式仍不生效，可通过浏览器开发者工具检查元素的样式优先级，排查是否有其他CSS规则（比如继承的text-align:center）覆盖了当前设置。

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