两个div的css包装而不编辑html

Question

我有一个3格的Display Flex，它是一个组件，但是我不能编辑它，因为它在多个团队之间共享。

我只能更新CSS，第一部分是实际布局，第二部分是预期的布局。

只有CSS我需要更新：

<div class="flex">
  <div class="square blue">
    x
  </div>
  <div class="square red">
   x
  </div>
  <div class="square yellow">
    x
  </div>
</div>

要获取第二个html渲染的结果（请参见JSFiddle）：

<div class="flex">
  <div class="square blue">
  x
  </div>
  <div class="square">
   <div class="square red">
    x
   </div>
   <div class="square yellow">
    x
   </div>
  </div>
</div>

https://jsfiddle.net/h8o523tL/33/

Answer 1

您可以使用CSS网格，并获得所需的布局：

.flex {
  display: grid;
  grid-template-areas: 
   "blue red" 
   "blue yellow";
}

.blue {
  grid-area: blue;
  background-color: blue;
}

.red {
  grid-area: red;
  background-color: red;
}

.yellow {
  grid-area: yellow;
  background-color: yellow;
}

<div class="flex">
  <div class="square blue">
    x
  </div>
  <div class="square red">
    x
  </div>
  <div class="square yellow">
    x
  </div>
</div>

更新

要获得更多浏览器支持，您可以尝试以下方法：

.flex {
  position:relative;
  overflow:hidden;
}
.blue {
  position:absolute;
  height:100%;
  top:0;
  left:0;
  width:50%;
  background-color: blue;
}

.flex:before {
  content:"";
  min-height:1px;
  width:50%;
  float:left;
}

.red {
  background-color: red;
  width:50%;
  float:left;
}

.yellow {
  background-color: yellow;
  width:50%;
  float:right;
}

<div class="flex">
  <div class="square blue">
    blue
  </div>
  <div class="square red">
    red
  </div>
  <div class="square yellow">
    yellow
  </div>
</div>