按钮尺寸变化为何会影响CSS flex-basis属性？求解答

调整按钮尺寸时，#container内的两个Flex子项（图片区域和文本区域）的flex-basis:50%比例会随之改变，即使缩小按钮也无法维持等分比例。

问题根源分析 #

1. Flex属性作用对象错误：在桌面端媒体查询中，你给#back-image img设置了flex-basis:50%，但flex-basis仅对Flex容器的直接子元素生效。#back-image才是#container（Flex容器）的直接子元素，给内部的img设置flex-basis不会影响Flex布局的比例分配。
2. 按钮固定宽度撑开父容器：按钮设置了固定宽度20rem，在桌面端#container-2的宽度被限制为flex-basis:50%，但按钮的固定宽度可能超出该容器的可用空间，导致#container-2被撑开，打破了50%的等分比例。
3. Flex项未明确收缩规则：默认情况下Flex项的flex-shrink:1，但当内容超出容器时，浏览器会优先保证内容显示，导致Flex比例被覆盖。

修复方案 #

以下是修正后的关键CSS代码，针对上述问题逐一修复：

* {
  box-sizing: border-box;
}

body {
  background-color: #f2ebe3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  min-height: 100vh; /* 确保body占满视口高度，避免容器位置偏移 */
  margin: 0; /* 去掉默认margin */
}

#container {
  width: 375px;
  height: 630px;
  border-radius: 10px;
  background-color: white;
  overflow: hidden; /* 避免子元素圆角溢出 */
}

#back-image {
  width: 100%;
}

#back-image img {
  width: 100%;
  height: auto; /* 移动端保持图片比例 */
}

#p1 {
  margin-left: 20px;
  opacity: 0.6;
}

#h1 {
  margin-left: 20px;
  font-family: 'Fraunces', serif;
}

#h2 {
  margin-left: 20px;
  margin-top: -5%;
  font-family: 'Fraunces', serif;
}

#p2 {
  margin-left: 20px;
  text-align: left;
  line-height: 1.4rem;
  opacity: 0.7;
}

#price-container {
  margin-left: 20px;
  display: flex;
  align-items: center;
}

#price-container h1 {
  font-family: 'Fraunces', serif;
  color: #3c8067;
}

#price-container p {
  margin-left: 1rem;
  font-family: 'Montserrat', sans-serif;
  text-decoration: line-through;
  opacity: 0.6;
}

#btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20px; /* 左右margin替代仅左margin */
  width: calc(100% - 40px); /* 自适应父容器宽度，减去左右margin */
  height: 50px;
  background-color: #3c8067;
  border: none;
  color: white;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
}

#btn:hover {
  cursor: pointer;
  background-color: #2F5951
}

.cart {
  margin-right: 10px
}

@media (min-width:576px) {
  #container {
    display: flex;
    width: 600px; /* 用固定宽度替代max-width，确保比例稳定 */
    height: 400px;
    margin: 0; /* 去掉多余margin */
  }
  #back-image {
    flex-basis: 50%; /* 给Flex容器的直接子元素设置flex-basis */
  }
  #back-image img {
    width: 100%;
    height: 100%; /* 图片填充父容器 */
    object-fit: cover; /* 保持图片比例，避免拉伸 */
    border-top-right-radius: 0;
    border-bottom-left-radius: 10px;
  }
  #container-2 {
    flex-basis: 50%;
    background-color: white;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 20px; /* 用padding替代内部元素的margin，布局更整洁 */
  }
  /* 移除内部元素的margin-left，改用container-2的padding */
  #p1, #h1, #h2, #p2, #price-container {
    margin-left: 0;
  }
  #btn {
    margin: 0; /* 去掉多余margin */
    width: 100%; /* 按钮自适应父容器宽度 */
  }
}

关键修改说明 #

• 修正Flex作用对象：将flex-basis:50%从img转移到#back-image（Flex容器的直接子元素），确保布局比例生效。
• 按钮宽度自适应：将按钮的固定宽度改为自适应父容器，避免撑开文本区域破坏比例。
• 优化布局容器：给#container添加overflow:hidden避免圆角溢出，桌面端用固定宽度替代max-width，确保比例稳定。
• 统一内边距：桌面端给#container-2添加padding，替代内部元素的margin-left，布局更可控。

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