HarmonyOS 关于相对布局最右侧内容被完全撑开问题

要实现左侧按钮固定，右侧按钮固定，中间内容相对左右两个按钮在中间，代码如下：

RelativeContainer() {
  Text(this.message)
    .id('HelloWorld')
    .fontSize(10)
    .fontWeight(FontWeight.Bold)
    .id("base_title_left_container")
    .alignRules({
      bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
      left: { anchor: "__container__", align: HorizontalAlign.Start }
    })


  Flex({ justifyContent: FlexAlign.End, alignItems: ItemAlign.Center }) {
    Text(this.message)
      .id('HelloWorld')
      .fontSize(10)
      .fontWeight(FontWeight.Bold)
    Text(this.message)
      .id('HelloWorld')
      .fontSize(10)
      .fontWeight(FontWeight.Bold)
  }

  .id("base_title_right_container")
  .alignRules({
    bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
    right: { anchor: "__container__", align: HorizontalAlign.End }
  })
  .backgroundColor('#00ff00')
  Row(){
    Text(this.message)
      .id('HelloWorld')
      .fontSize(10)
      .fontWeight(FontWeight.Bold)

  }.alignRules({
    left: { anchor: "base_title_left_container", align: HorizontalAlign.End },
    right: { anchor: "base_title_right_container", align: HorizontalAlign.Start }
  }).backgroundColor('#ff0000')
}
.height('20')
.width('100%')

实际效果是右侧的Flex把整个容器撑满了，如何让右侧Flex跟随内容宽度设置宽度？