优先增长一个div，然后再增长它的兄弟

Question

我的页面可以有两种样式，具体取决于用户设置：

款式一：

div > div {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.left {
  background-color: lightgreen;
  float: left;
}

.right {
  background-color: red;
  float: right;
}

.end {
  background-color: lightblue;
  float: left;
}

.left,
.right,
.end {
  width: 50%;
}

<div>
  <div class="left">LEFT</div>
  <div class="right">RIGHT</div>
  <div class="end">END</div>
</div>

款式2：

div > div {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.left {
  background-color: lightgreen;
  float: left;
}

.right {
  background-color: red;
  float: right;
}

.end {
  background-color: lightblue;
  float: left;
}

.left,
.right {
  width: 50%;
}

.end {
  width: 100%;
}

<div>
  <div class="left">LEFT</div>
  <div class="right">RIGHT</div>
  <div class="end">END</div>
</div>

这工作得很好，但它并不像我希望的那样通用。例如，我希望

.left

和

.right

具有动态宽度而不是固定宽度，例如：

.left,
.right {
  min-width: 40%;
  max-width: 60%;
}

并使

.left

优先增长，即：

• .left

  宽度至少为40%
• 如果

  .left

  含量大于40%，

  .left

  可以增长到高达60%

• .right

  宽度至少为40%
• 如果

  .right

  含量大于 40%，它会增长以占用尽可能多的剩余空间（因此，如果

  .left

  已经占用 60%，则它根本无法增长）。

最后，每个div的高度都是动态的，根据div内容增长。

用CSS似乎不可能实现

float

（因为div之间不知道彼此

width

），但是用CSS Grid可以实现吗？

Answer 1

这是设置场景的 CSS 片段：

.container {
 display: grid;
 grid-template-columns: minmax(40%, 60%) auto;
 writing-mode: vertical-rl;
 text-orientation: upright;
}

.left {
 background-color: lightgreen;
 grid-column: 1;
 }

 .right {
  background-color: red;
  grid-column: 2;
  }

 .end {
  background-color: lightblue;
  grid-column: 1 / span 2;
  }

只需将其放入您的样式表中，您就会得到一个动态适应的布局，给予 .left 应有的关注，同时保持一切和谐。