React中Div宽度设置失效问题求助

问题描述 #

在React项目中，无法为div设置50%宽度，高度可正常设置，但宽度设置始终不生效。尝试过在tasksContainer和taskContainer中使用vw、vh单位设置宽度，仍然没有效果。

JSX代码 #

<div className='tasksContainer'>
  {tasks.map((tasks, index) => (
    <div className='taskContainer'>
      <Form>
        <Form.Check 
          className='taskCheckbox'
        />
      </Form>
      <p>{tasks.name}</p>
      {dateTime}

      <div className='taskContainer2'>
        <Button className='b1'>
          <Icon disabled name='trash' />
        </Button>
        <Button className='b1'>
          <Icon disabled name='pencil' />
        </Button>
      </div>
    </div>
  ))}
</div>

CSS代码 #

.tasksContainer {
    margin-top: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #ECEDF6;
    background-color: #ECEDF6;
    border-radius: 0.6rem;
}

.taskContainer {
    display: flex;
    width: 50%;
    flex-direction: row;
    width: 5vw;
    padding: 0.5rem;
    border: 0.2rem solid white;
    border-radius: 1rem;
    margin: 1rem;
    background-color: blue;
    accent-color: grey;
}

.taskContainer2{
    display: flex;
    width: 50%;
    background-color: red;
}

.taskCheckbox {
    transform: scale(2);
    float: left;
    margin: 1rem;
}

.b1{
   margin: 0.5rem;
}

截图 #

解决办法 #

1. 删除重复的width属性：taskContainer中重复定义了两次width，width: 50%;被后面的width: 5vw;覆盖，保留你需要的那一个即可（比如要50%宽度就删掉width: 5vw;）。
2. 给父容器添加flex布局：tasksContainer使用了align-items和justify-content但未设置display: flex，这两个属性仅在flex容器中生效。添加display: flex; flex-direction: column;，让子元素的百分比宽度能基于父容器宽度计算。
3. 移除浮动属性：taskCheckbox的float: left会干扰flex布局逻辑，建议删除该属性，改用flex的对齐方式控制位置。
4. 确保父容器有明确宽度：如果tasksContainer宽度由内容撑开，子元素的百分比宽度会失去参考基准。给tasksContainer设置width: 100%;或固定宽度，为子元素提供计算依据。

修改后的CSS示例：

.tasksContainer {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #ECEDF6;
    background-color: #ECEDF6;
    border-radius: 0.6rem;
    width: 100%;
}

.taskContainer {
    display: flex;
    width: 50%;
    flex-direction: row;
    padding: 0.5rem;
    border: 0.2rem solid white;
    border-radius: 1rem;
    margin: 1rem;
    background-color: blue;
    accent-color: grey;
}

.taskCheckbox {
    transform: scale(2);
    margin: 1rem;
}

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