我想要以下布局，但我受到了html代码的限制.我只能更改css.
列1具有定义的宽度，但行必须占据宽度的其余部分.
+---+----------------+
| | 2 |
| |----------------+
| 1 | 3 |
| |----------------+
| | 4 |
|---|----------------+
<div class="cont">
<div class="c1">1</div>
<div class="l2">2</div>
<div class="l3">3</div>
<div class="l4">4</div>
</div>这不是Flexbox的任务，而是可以控制2个方向的CSS-Grid，不像Flexbox.
要有2列，其中第一列宽度取决于第一个元素，其余列占用剩余空间，您可以使用:grid-template-columns: auto 1fr;.
要使第一个元素占据整个第一列，可以使用grid-row: span {{number of rows}}.如果您不知道行数或其他元素的数量，则使用无法达到的高得离谱的数字:
.cont {
display: grid;
grid-template-columns: auto 1fr;
}
.c1 {
grid-row: span 100;
width: 200px;
}
/* for visualization purpose only */
.cont > div {
border: 2px dashed red;
}<div class="cont">
<div class="c1">1</div>
<div class="l2">2</div>
<div class="l3">3</div>
<div class="l4">4</div>
</div>