当内容超出分配的宽度时，Flex项目会扩展

Question

我有两个孩子的弹性排。两者都是flex: 1。第一个孩子也是一个有两个孩子的弹性行，两者都是flex: 1。我们将调用第一个子X的第一个子节点。当X的内容超过行宽度的一半时，X展开并使其父节点展开，最终从其他元素中占用空间。相反，所需的行为是内容溢出。

[[X][ ]][ ]

Problem

＆＃13;

＆＃13;

.r {
  display: flex;
}

.container {
  width: 300px;
  height: 50px;
}

.x1 {
  flex: 1 0 0;
}

.of {
  overflow-x: auto;
}

.red {
  background: #f88;
}

.blue {
  background: #88f;
}

＆＃13;

<div class='r container'>
  <div class='r red x1'>
    <div class='x1 of'>
      Supercalifragilisticexpialidocious
    </div>
    <div class='x1'>
      Hello
    </div>
  </div>
  <div class='blue x1'>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我已经攻击了fix using position: absolute，但是有更优雅的解决方案吗？