flex-direction:row 下面的flex-direction:columns 下的 div 的宽度不会与父元素保持一致 · Issue #I54IVS · OpenHarmony/arkui_ace_engine - Gitee.com

开源项目 > OpenHarmony > 底层组件 &&

/ 详情

已完成

任务

创建于

2022-04-25 11:35

【任务描述】
一. flex-direction:row 下面的flex-direction:columns 下的 div 的宽度不会与父元素保持一致。代码如下：

index.hml内容如下：

<div class="container">
  <div class="h-100 b-success"></div>
  <div class="f-r">
    <div class="f-c f-1">
      <div class="h-100 b-success"></div>
    </div>
    <text class="f-s-14 c-cyan">some text</text>
  </div>
</div>

index.css 内容如下:

.container{
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
  flex-direction: column;
  background-color: #f2f2f2;
}

.f-r{
  flex-direction: row;
}

.f-c{
  flex-direction: column;
}

.f-1{
  flex: 1;
}

.h-100{
  height: 100px;
}


.b-success{
  background-color: #25cf42;
}

.c-cyan{
  color: #00cbb8;
}

二. 运行结果
输入图片说明

【解决方案】

【任务来源】

创建了任务

修改了描述

原值

**【任务描述】**

一. flex-direction:row 下面的flex-direction:columns 下的 div 的 宽度不会与父元素保持一致。代码如下：

1. index.hml内容如下：

<div class="container">

  <div class="h-100 b-success"></div>

  <div class="f-r">

    <div class="f-c f-1">

      <div class="h-100 b-success"></div>

    </div>

    <text class="f-s-14 c-cyan">some text</text>

  </div>

</div>

2. index.css 内容如下:

.container{

  padding-top: 20px;

  padding-left: 10px;

  padding-right: 10px;

  padding-bottom: 20px;

  flex-direction: column;

  background-color: #f2f2f2;

}

.f-r{

  flex-direction: row;

}

.f-c{

  flex-direction: column;

}

.f-1{

  flex: 1;

}

.h-100{

  height: 100px;

}

.b-success{

  background-color: #25cf42;

}

.c-cyan{

  color: #00cbb8;

}

二. 运行结果

![输入图片说明](https://images.gitee.com/uploads/images/2022/0425/113525_1996d612_10286577.png "mx_screencap_20220425_113455.png")

**【解决方案】**

**【任务来源】**

新值

**【任务描述】**

一. flex-direction:row 下面的flex-direction:columns 下的 div 的 宽度不会与父元素保持一致。代码如下：

1. index.hml内容如下：

<div class="container">

  <div class="h-100 b-success"></div>

  <div class="f-r">

    <div class="f-c f-1">

      <div class="h-100 b-success"></div>

    </div>

    <text class="f-s-14 c-cyan">some text</text>

  </div>

</div>

2. index.css 内容如下:

.container{

  padding-top: 20px;

  padding-left: 10px;

  padding-right: 10px;

  padding-bottom: 20px;

  flex-direction: column;

  background-color: #f2f2f2;

}

.f-r{

  flex-direction: row;

}

.f-c{

  flex-direction: column;

}

.f-1{

  flex: 1;

}

.h-100{

  height: 100px;

}

.b-success{

  background-color: #25cf42;

}

.c-cyan{

  color: #00cbb8;

}

二. 运行结果

![输入图片说明](https://images.gitee.com/uploads/images/2022/0425/113525_1996d612_10286577.png "mx_screencap_20220425_113455.png")

**【解决方案】**

**【任务来源】**

修改了描述

原值

**【任务描述】**

一. flex-direction:row 下面的flex-direction:columns 下的 div 的 宽度不会与父元素保持一致。代码如下：

1. index.hml内容如下：

<div class="container">

  <div class="h-100 b-success"></div>

  <div class="f-r">

    <div class="f-c f-1">

      <div class="h-100 b-success"></div>

    </div>

    <text class="f-s-14 c-cyan">some text</text>

  </div>

</div>

2. index.css 内容如下:

.container{

  padding-top: 20px;

  padding-left: 10px;

  padding-right: 10px;

  padding-bottom: 20px;

  flex-direction: column;

  background-color: #f2f2f2;

}

.f-r{

  flex-direction: row;

}

.f-c{

  flex-direction: column;

}

.f-1{

  flex: 1;

}

.h-100{

  height: 100px;

}

.b-success{

  background-color: #25cf42;

}

.c-cyan{

  color: #00cbb8;

}

二. 运行结果

![输入图片说明](https://images.gitee.com/uploads/images/2022/0425/113525_1996d612_10286577.png "mx_screencap_20220425_113455.png")

**【解决方案】**

**【任务来源】**

新值

**【任务描述】**

一. flex-direction:row 下面的flex-direction:columns 下的 div 的 宽度不会与父元素保持一致。代码如下：

1. index.hml内容如下：

```

<div class="container">

  <div class="h-100 b-success"></div>

  <div class="f-r">

    <div class="f-c f-1">

      <div class="h-100 b-success"></div>

    </div>

    <text class="f-s-14 c-cyan">some text</text>

  </div>

</div>

```

2. index.css 内容如下:

```

.container{

  padding-top: 20px;

  padding-left: 10px;

  padding-right: 10px;

  padding-bottom: 20px;

  flex-direction: column;

  background-color: #f2f2f2;

}

.f-r{

  flex-direction: row;

}

.f-c{

  flex-direction: column;

}

.f-1{

  flex: 1;

}

.h-100{

  height: 100px;

}

.b-success{

  background-color: #25cf42;

}

.c-cyan{

  color: #00cbb8;

}

```

二. 运行结果

![输入图片说明](https://images.gitee.com/uploads/images/2022/0425/113525_1996d612_10286577.png "mx_screencap_20220425_113455.png")

**【解决方案】**

**【任务来源】**

将负责人设置为yangfan229

将任务状态从 待办的 修改为进行中

展开全部操作日志

按照现象来看，可能为缺陷修改引入。实际效果应显示绿色背景。本地会进行排查

将任务状态从 进行中 修改为已完成

登录后才可以发表评论

状态

负责人

项目

里程碑

Pull Requests

关联的 Pull Requests 被合并后可能会关闭此 issue

分支

开始日期 - 截止日期

-

置顶选项

优先级

预计工期（小时）

参与者（2）

1

https://gitee.com/openharmony/arkui_ace_engine.git

git@gitee.com:openharmony/arkui_ace_engine.git

openharmony

arkui_ace_engine

arkui_ace_engine