布局问题。只需要用css即可完成，无需js

Question

我的卡片布局有问题。 我需要左侧的卡片始终为全高，直到底部卡片宽度到达左侧的卡片。那么左边卡片的高度应该相应减小。

第一个例子 第二个例子

如果可能的话，我想用CSS来做所有事情。 尝试使用 flex 和 grid，但没有成功。谢谢。

Answer 1

based on the images supported here are both based of this html structure:

    <div class="layout">
      <div class="card1"> card 1</div>
      <div class="card2"> card 2</div>
    </div>
    

The styles for each image
for example 1 :
    html,body { height: 100%; margin: 0px; padding: 0px; }
    
        .layout{
          display:flex;
          align-items:end;
          background-color: lightblue;
          height:100%;
          width:100%;
          gap:5px;
        }
        
        .card1{
          width:20%;
          height:100%;
          text-align:center;
          border:2px solid black;
          background-color:white
        }
        .card2{
          flex:1;
          height:20%;
          text-align:center;
          border:2px solid black;
          background-color:white
          
        }
    
    for example 2:
    html,
    body {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
    
    .layout {
      display: flex;
      flex-direction: column;
      background-color: lightblue;
      height: 100%;
      width: 100%;
      gap: 5px;
    }
    
    .card1 {
      width: 15%;
      height: 100%;
      text-align: center;
      border: 2px solid black;
      background-color: white;
    }
    .card2 {
      width: 100%;
      height: 25%;
      text-align: center;
      border: 2px solid black;
      background-color: white;
    }