Html 两个flex项目紧挨着一个flexbox网格

我试着在左边有一个div，在右边有两个div。

bottomright

应始终位于

topRight

div的下方。

topRight

是唯一具有可变高度的div

我目前正在尝试使用flexbox实现这一点，您可以在下面的代码中看到

我想知道一些方向

.wrapper{
显示器：flex；
高度：100px；
}
.左{
背景颜色：绿色
}
托普赖特先生{
背景颜色：黄色
}
.右下角{
背景颜色：红色
}

左边
右上角
底部
对于容器上的固定高度，正如您在代码中所做的那样，您可以使用
flex-direction:column
和
flex-wrap:wrap
。固定高度用作断点，告诉flex项目在何处包裹


.wrapper{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
高度：100px；
}
.左{
flex:0 100%；/*消耗第一列的完整高度；强制同级换行*/
背景颜色：浅绿色
}
/*可变高度div*/
托普赖特先生{
背景颜色：黄色
}
.右下角{
flex:1；/*占用列中的剩余空间*/
背景颜色：红色
}

左边
右上角
可变高度
底部
在html上放置一个div，其中包含一个名为right wrapping的类，包括topRight和bottomRight，并在css上使用此css：

.wrapper {
  display: flex;
  height: 100px;
}

.right {
 display: flex-flow;
 }

.left {
     background-color: green
}

.topRight {
 background-color: yellow;
 height: 50px;
}

.bottomright {
  background-color: red;
  height: 50px;
}

我希望这对您有所帮助：）
对于infos

display:grid
是为这个。。。。很快就可用于大多数浏览器，但也可用于少数浏览器

其中包括教程：


.wrapper{
显示：网格；
网格模板列：重复（自动填充，最小值（200px，1fr））；
/*任何高度*/
背景颜色：绿色；
}
.leftspan{
网格行：跨度2；/*如果有2行可用*/
}
托普赖特先生{
背景颜色：黄色；
网格柱：2/-1
}
.右下角{
背景色：红色；
网格柱：2/-1
}
.满满的{
背景色：红色；
格线柱：1/-1
}

左跨2行
顶部
右侧
底部
右侧
还是你的意思？
左边
右上角
底部
右侧
如果您包装正确的div，这很容易作为动态（无固定高度）解决。这是一个选项吗？您需要阅读flexbox属性…现在，这根本不起作用