CSS divs彼此相邻，影响彼此的宽度

Question

我有这个问题，我似乎无法弄明白。经过研究，我似乎无法找到解决它的人。我不确定它是否可以在纯CSS中解决，但我不得不问：

考虑一种情况，其中有两个div彼此相邻。 div有一个已知的宽度。

然而，内容的大小尚不清楚。当一个div的内容变得非常大时，该div应该占用另一个div的空间，如下：

只有当已知宽度无法容纳内容时，此宽度才会增长。 同样，如果蓝色div的内容非常大，蓝色div应该会增长：

这可以用CSS解决，还是需要JS？

Answer 1

flexbox和min-width可以做到：

＆＃13;

＆＃13;

.wrap {
  width: 50%;
  margin: 1em auto;
  border: 1px solid grey;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.wrap div {
  flex: 1 0 auto;
  max-width: 70%;
}
.left {
  background: rgba(255, 0, 0, 0.5);
  min-width: 30%;
}
.right {
  background: rgba(0, 0, 255, 0.5);
  min-width: 30%;
}

＆＃13;

<div class="wrap">
  <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur quas incidunt dolorem doloribus asperiores, iure esse voluptatibus dolore cum sint exercitationem minus aspernatur explicabo perspiciatis distinctio expedita.</div>
  <div class="right"></div>

</div>

<div class="wrap">
  <div class="left"></div>
  <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, accusantium libero omnis, quod ea pariatur porro asperiores enim officia minima!</div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您将固定大小设置为div，则内容将以多行而不是div展开以适合内容。 相反，你需要设置最小宽度到div然后它可以扩展，但你必须设置它可以占用的最大宽度，以便它不会占用完整的空间推动第二个div。