盒子右侧出现多余空白？图文并排布局问题求助

问题根源 #

1. 文本元素#aboutUsText和#aboutUsText2设置了固定width:30%，直接限制了文本宽度，导致右侧出现大量空白。
2. 外层使用Chakra UI的<Grid>组件却额外添加display:flex，网格布局和flex布局冲突，导致布局逻辑混乱。
3. 包裹文本的<Box>未设置占据剩余空间的属性，无法利用图片旁的可用区域。

修复步骤 & 修改代码 #

1. 修正CSS样式

#roundedBox {
    border-radius: 25px;
    background: #363636;
    width: auto;
    height: auto;
    margin: 10%;
    display: flex;
    align-items: flex-start; /* 让图片与文本顶部对齐 */
  }

#aboutUsImage {
    max-height: 480px;
    margin: 2% 3% 2% 4%; /* 简化margin写法 */
    border-radius: 5%;
    object-fit: cover; /* 保持图片比例，避免拉伸 */
}

#aboutUsTitle {
    font-size: 20px;
    padding-top: 2%; /* 缩小顶部内边距，避免标题过于靠下 */
    text-align: left;
    margin: 0 0 16px 0; /* 增加底部外边距，与文本拉开距离 */
}

#aboutUsText {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6; /* 增大行高，提升可读性 */
    text-align: left;
    margin: 0 0 16px 0;
    /* 移除width:30%限制 */
}

#aboutUsText2 {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    text-align: left;
    margin: 0;
    /* 移除width:30%和多余的内边距/外边距 */
}

2. 调整JSX结构

将外层<Grid>替换为<Box>，避免网格布局干扰flex逻辑；给文本容器<Box>添加flex:1属性，让它占据图片之外的所有剩余空间：

<Box id="roundedBox">
  <Image id="aboutUsImage" src={aboutUs} />

  <Box flex={1} padding="2% 4% 2% 0"> {/* 添加右侧内边距，避免文本贴边 */}
    <Heading id="aboutUsTitle"> About us</Heading>
    
    <Text id="aboutUsText"> Founded in 2021, Coded Solution aims to create a secure underlying infrastructure platform for blockchain databases through consensus algorithms of the innovative supernode PoS consensus mechanism.</Text>
    
    <Text id="aboutUsText2"> This creates solutions for everything including smart contract, wallet, explorer, app, frontend and backend, which is unique in the current market.</Text>
  </Box>
</Box>

额外优化建议 #

• 若想限制文本区域最大宽度，可给文本容器<Box>设置max-width（如max-width: 600px），而非给单个文本元素设固定宽度。
• 优先使用Chakra UI内置样式属性（如paddingX、marginY）替代自定义CSS，减少样式冲突，更好适配组件库逻辑。

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