Div覆盖两个兄弟div，谁将填充父母

Question

我有4个div，看起来像这样

期望的输出：

当前代码：

<div class="center aligned" style="width: 100%;height: 7em; padding: 2em; position:absolute;">
    <div class="ui small grey label fluid progress_padding_top_bottom" style="z-index:1;height: 7em; border-radius: 0; padding-right: 0; padding-left: 0; background-color: #E8E8E8 !important;">
    <div style="background-color: #21BA45; width: 5%; height: 7em; float:left;"></div>
    <div style="background-color: #ffdd00; width: 20%; height: 7em; float:left;"></div>
    <div style="width: 100%;" class="center aligned">ABC</div>
</div>

更新：这是进度条的一部分，因此红色和黄色宽度都会改变

Answer 1

这会产生你想要投入的东西

https://jsfiddle.net/wcsfnbuL/

<div class="center aligned" style="width: 100%;height: 7em; padding: 2em; position:absolute;">
        <div style="background-color: red; width: 15%; height: 7em; float:left; margin: auto;"></div>
        <div style="background-color: #ffdd00; width: 15%; height: 7em; text-align: center; vertical-align: middle; line-height: 7em; float:left; margin: auto;">ABC</div>
        <div class="ui small grey label fluid progress_padding_top_bottom" style="z-index:1;height: 7em; border-radius: 0; padding-right: 0; padding-left: 0; background-color: #E8E8E8; float: left; width: 15%"></div>

    </div>

Answer 2

将彩色div包装在自己的容器中，并将其放置在内容之外。

＆＃13;

＆＃13;

...didLayout

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 50%;
  margin: 1em auto;
  background: lightgrey;
  height: 7em;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-weight: bold;
}

.content {
  position: relative;
  z-index: 1;
}

.underlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.red {
  height: 100%;
  background: red;
  width: 25%;
  float: left;
}

.yellow {
  height: 100%;
  background: yellow;
  float: left;
  width: 25%;
}

＆＃13;

＆＃13;

＆＃13;