html - 动态调整宽度和包装嵌套的 flexboxes

Question

我有一个 div 在一些 flexboxes 中嵌套了几层，根据其中文本的长度动态改变宽度。

是否有可能让包含的 flexboxes 也改变宽度并根据需要纯粹用 CSS 换行？如果没有，我愿意接受任何 JavaScript 解决方案。

为了更好地理解我在说什么，这是一个视觉效果:

如果有人想玩它，这里有一段代码:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  flex: 1 auto;
  border: 1px solid black;
  margin: 5px;
}

.root {
  max-width: 600px;
  border: 1px solid black;
}

.level-2 {
  background-color: tomato;
}

.level-3 {
  background-color: cornflowerblue;
}

<div class="flex-container root">
  <div class="flex-container flex-item level-2">
    <div class="flex-item level-3">
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
    </div>
    <div class="flex-item level-3">
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
    </div>
  </div>
  <div class="flex-container flex-item level-2">
    <div class="flex-item level-3">
      <div>Some text</div>
      <div>Some longest text over here</div>
      <div>Some text</div>
      <div>Some text</div>
    </div>
    <div class="flex-item level-3">
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
    </div>
  </div>
</div>

Answer 1

我能看到的最好的情况是第一种和第二种情况。它不是 100% 完美，但在调整大小时你会看到 1 和 2 之间的转换:

* {
 box-sizing:border-box;
}

.container {
  background:red;
  padding:10px;
  display:flex;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.box {
  flex:1 0 50%;
  background:blue;
  border:1px solid;
  display:flex;
  padding:10px;
}
.box > span {
   background:#fff;
   border:1px solid;
  flex:1 0 50%;
  white-space:nowrap;
}

<div class="container">
  <div class="box">
    <span>some text<br>some text<br>some text</span>
    <span>some text<br>some text<br>some text</span>
  </div>
  <div class="box">
    <span>some text<br>some text<br>some text</span>
    <span>some text<br>some text<br>some text</span>
  </div>
</div>
<div class="container">
  <div class="box">
    <span>some text<br>some text long long long long text<br>some text</span>
    <span>some text<br>some text<br>some text</span>
  </div>
  <div class="box">
    <span>some text<br>some text<br>some text</span>
    <span>some text<br>some text<br>some text</span>
  </div>
</div>