动态调整宽度和包裹嵌套的弹性盒子

Question

我有一个div嵌套在一些flexbox中，这些flexbox动态地改变宽度，取决于其中的文本有多长。

使用纯CSS是否可能使包含的flexbox也随之改变宽度和自动换行？如果不行，我也可以考虑任何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>

- Lani

---

我认为不行，使用纯CSS处理嵌套和非同级元素几乎是不可能的，尤其是针对你第三个情况，也许第1和第2个情况是可能的。 - Temani Afif

啊，真糟糕。我浪费了很多时间来解决这个问题！哈哈。如果是这样的话，我愿意接受任何JavaScript的解决方案。 - Lani

这只是我个人的观点；)或许一些CSS巫师会带来一些魔法 :) - Temani Afif

我也不认为可以只用纯CSS实现这个。 - Andrzej Ziółek

@TemaniAfif，你会如何处理第二个问题？ - Lani

@TemaniAfif 好奇你如何让蓝色容器先增长（并保持最小宽度为50％），而不是先换行文本。 - Lani

Answer 1

我所能看到的最好方案是采用第一种和第二种情况。虽然并不完美，但在调整大小时，您将看到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>

- Temani Afif

Answer 2

你应该看看这个：

function check(){
  var str = $('#text').val()  

    if (str.length < 15) {
      document.body.innerHTML = '';
      document.write('<style>');
      document.write('    .big_container{');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color: grey;');
      document.write('      padding: 6px;');
      document.write('    }');
      document.write('');
      document.write('    .container{');
      document.write('      padding: 5px;');
      document.write('      height: 50px;');
      document.write('      width: 47%;');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color:blue;');
      document.write('    }');
      document.write('');
      document.write('    .redrectangle{');
      document.write('      height: 50px;');
      document.write('      width: 49%;');
      document.write('      background-color: red;');
      document.write('    }');
      document.write('');
      document.write('    .big_container2{');
      document.write('      display: flex;');
      document.write('      flex-wrap: wrap;');
      document.write('      justify-content: space-between;');
      document.write('      background-color: grey;');
      document.write('      padding: 6px;');
      document.write('    }');
      document.write('');
      document.write('    .container2{');
      document.write('      padding: 5px;');
      document.write('      height: 50px;');
      document.write('      width: 100%;');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color:blue;');
      document.write('      margin-bottom: 10px;');
      document.write('    }');
      document.write('');
      document.write('    .container3{');
      document.write('      padding: 5px;');
      document.write('      height: 105px;');
      document.write('      width: 100%;');
      document.write('      display: flex;');
      document.write('      flex-wrap: wrap;');
      document.write('      background-color:blue;');
      document.write('      margin-bottom: 10px;');
      document.write('    }');
      document.write('');
      document.write('    .redrectangle3{');
      document.write('      height: 50px;');
      document.write('      width: 100%;');
      document.write('      margin-top: 1px;');
      document.write('      background-color: red;');
      document.write('    }');
      document.write('');
      document.write('</style>');
      document.write('<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">');
      document.write('<\/script>');
      document.write('<input id="text">');//
      document.write('<button onclick="check()">Go !');
      document.write('</button>');


      document.write('<div class="big_container">');
      document.write('<div class="container">');
      document.write('<div class="redrectangle"></div>');
      document.write('<div class="redrectangle">'+str+'</div>');
      document.write('</div>');
      document.write('<div class="container">');
      document.write('<div class="redrectangle"></div>');
      document.write('<div class="redrectangle"></div>');
      document.write('</div>');
      document.write('</div>');

    }else if (str.length  < 35) {
      document.body.innerHTML = '';
      document.write('<style>');
      document.write('    .big_container{');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color: grey;');
      document.write('      padding: 6px;');
      document.write('    }');
      document.write('');
      document.write('    .container{');
      document.write('      padding: 5px;');
      document.write('      height: 50px;');
      document.write('      width: 47%;');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color:blue;');
      document.write('    }');
      document.write('');
      document.write('    .redrectangle{');
      document.write('      height: 50px;');
      document.write('      width: 49%;');
      document.write('      background-color: red;');
      document.write('    }');
      document.write('');
      document.write('    .big_container2{');
      document.write('      display: flex;');
      document.write('      flex-wrap: wrap;');
      document.write('      justify-content: space-between;');
      document.write('      background-color: grey;');
      document.write('      padding: 6px;');
      document.write('    }');
      document.write('');
      document.write('    .container2{');
      document.write('      padding: 5px;');
      document.write('      height: 50px;');
      document.write('      width: 100%;');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color:blue;');
      document.write('      margin-bottom: 10px;');
      document.write('    }');
      document.write('');
      document.write('    .container3{');
      document.write('      padding: 5px;');
      document.write('      height: 105px;');
      document.write('      width: 100%;');
      document.write('      display: flex;');
      document.write('      flex-wrap: wrap;');
      document.write('      background-color:blue;');
      document.write('      margin-bottom: 10px;');
      document.write('    }');
      document.write('');
      document.write('    .redrectangle3{');
      document.write('      height: 50px;');
      document.write('      width: 100%;');
      document.write('      margin-top: 1px;');
      document.write('      background-color: red;');
      document.write('    }');
      document.write('');
      document.write('</style>');
      document.write('<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">');
      document.write('<\/script>');
      document.write('<input id="text">');//
      document.write('<button onclick="check()">Go !');
      document.write('</button>');


      
      document.write('<div class="big_container2">');
      document.write('<div class="container2">');
      document.write('<div class="redrectangle"></div>');
      document.write('<div class="redrectangle">'+str+'</div>');
      document.write('</div>');
      document.write('<div class="container2">');
      document.write('<div class="redrectangle"></div>');
      document.write('<div class="redrectangle"></div>');
      document.write('</div>');
      document.write('</div>');
    }else{  
      document.body.innerHTML = '';
      document.write('<style>');
      document.write('    .big_container{');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color: grey;');
      document.write('      padding: 6px;');
      document.write('    }');
      document.write('');
      document.write('    .container{');
      document.write('      padding: 5px;');
      document.write('      height: 50px;');
      document.write('      width: 47%;');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color:blue;');
      document.write('    }');
      document.write('');
      document.write('    .redrectangle{');
      document.write('      height: 50px;');
      document.write('      width: 49%;');
      document.write('      background-color: red;');
      document.write('    }');
      document.write('');
      document.write('    .big_container2{');
      document.write('      display: flex;');
      document.write('      flex-wrap: wrap;');
      document.write('      justify-content: space-between;');
      document.write('      background-color: grey;');
      document.write('      padding: 6px;');
      document.write('    }');
      document.write('');
      document.write('    .container2{');
      document.write('      padding: 5px;');
      document.write('      height: 50px;');
      document.write('      width: 100%;');
      document.write('      display: flex;');
      document.write('      justify-content: space-between;');
      document.write('      background-color:blue;');
      document.write('      margin-bottom: 10px;');
      document.write('    }');
      document.write('');
      document.write('    .container3{');
      document.write('      padding: 5px;');
      document.write('      height: 105px;');
      document.write('      width: 100%;');
      document.write('      display: flex;');
      document.write('      flex-wrap: wrap;');
      document.write('      background-color:blue;');
      document.write('      margin-bottom: 10px;');
      document.write('    }');
      document.write('');
      document.write('    .redrectangle3{');
      document.write('      height: 50px;');
      document.write('      width: 100%;');
      document.write('      margin-top: 1px;');
      document.write('      background-color: red;');
      document.write('    }');
      document.write('');
      document.write('</style>');
      document.write('<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">');
      document.write('<\/script>');
      document.write('<input id="text">');//
      document.write('<button onclick="check()">Go !');
      document.write('</button>');


      
      document.write('<div class="big_container2">');
      document.write('<div class="container3">');
      document.write('<div class="redrectangle3">'+str+'</div>');
      document.write('<div class="redrectangle3"></div>');
      document.write('</div>');
      document.write('<div class="container3">');
      document.write('<div class="redrectangle3"></div>');
      document.write('<div class="redrectangle3"></div>');
      document.write('</div>');
      document.write('</div>');
    }

}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<input id="text"><button onclick="check()">Go !</button>

- Pol

---

我认为你没有理解这个问题。这不是关于创建三个布局，而是同一个布局根据内容的不同而改变。 - Temani Afif

哦，我的天啊，这是什么？...抱歉，但你还是没有理解问题，这是一个静态布局动态创建的，而不是动态布局。 - Temani Afif

好了，你不能说我没试过 :p - Pol