为何CSS百分比宽度未生效？Flex布局列宽异常问题

想实现容器内的两列flex布局：左侧列默认占1/4宽度，hover时变为1/2宽度；右侧列占据剩余空间。但实际左侧列宽度远小于设置的25%和50%，已为html、body及容器div定义了尺寸，为什么宽度不符合预期？

问题出在你给左右两个flex项目都加了margin: auto——在flex布局中，这个属性会强制将容器的剩余空间分配给margin，直接覆盖了你设置的width值，导致左侧列只能收缩到内容+padding的宽度，完全达不到预期的25%/50%。

另外，.right没有设置flex: 1，也无法自动填充剩余空间，进一步加剧了布局错乱。

1. 移除.left和.right中的margin: auto
2. 给.right添加flex: 1，让它自动占据容器剩余空间
3. 如果需要让列内的内容居中，用display: flex + align-items + justify-content代替margin: auto
4. 给所有元素加上box-sizing: border-box，确保padding和border不会撑开元素宽度（可选但推荐）

html,
body {
  height: 100%;
  width: 100%;
  min-width: 100%;
  margin: 0; /* 清除body默认margin，避免容器溢出视口 */
}

.container {
  height: 50%;
  width: 100%;
  display: flex;
  flex-direction: row;
  border-radius: 0.25rem;
  margin: 1rem;
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box; /* 让border包含在容器宽度内 */
}

.left {
  width: 25%;
  height: 100%;
  border-width: 1px;
  border-style: solid;
  transition-property: width;
  transition-duration: 300ms;
  padding: 1rem;
  box-sizing: border-box; /* padding包含在宽度内 */
  display: flex;
  align-items: center;
  justify-content: center; /* 实现内容垂直水平居中 */
}

.left:hover {
  width: 50%;
}

.right {
  flex: 1; /* 自动填充容器剩余空间 */
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 1rem 4rem;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
  display: flex;
  align-items: center; /* 可选：让右侧内容垂直居中 */
}

<div class="container">
  <div class="left">
    Placeholder
  </div>
  <p class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula purus, lobortis luctus malesuada vitae, egestas quis lorem. Mauris ultrices mauris et enim dictum fermentum. Nam nibh nulla, posuere ut egestas a, fringilla ac augue. Vivamus sed
    eros eget purus maximus iaculis. </p>
</div>

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