css - 应该避免大的 flexbox flex-values 吗？

Question

所以我有一个包含 2 个 block 的 block ，其中 block 1 占据了 90% 的空间， block 2 大约占据了 10% 的空间。这在大多数浏览器中都可以正常工作，但是在 IE 11 中，block1 占用了太多空间 (~97%)，隐藏了 block2 的大部分内容。如下面的代码所示，使用 flex: 1 和 flex: 0。但是，如果我将 block 的值更改为 flex: 10 和 flex: 0，它在所有浏览器中都可以正常工作。

.block1 {
    flex: 1;  // --> 9
}

.block2 {
    flex: 0;  // --> 1
}

所以对于我的问题；有什么理由我应该避免这种方法吗？如果是这样，什么是更好的解决方案？

对于我们正在处理的事情的一些背景；它是一个带有主文本消息和关闭按钮的水平拉伸(stretch)通知栏。

可怕的重建:

                                   Centered text                                    [Close]

Answer 1

使用 flex: 0 0 10% 将 10% 分配给 block 2，然后使用 flex: 1

将剩余空间分配给 block 1

演示

.wpr {
  display: flex;
  height: 100px;
}
.block1 {
  flex: 1;
  background: aqua;
}
.block2 {
  flex: 0 0 10%;
  background: tomato;
}

<div class="wpr">
  <div class="block1">block 1</div>
  <div class="block2">block 2</div>
</div>