Динамическое изменение ширины и упаковка вложенных флексбоксов

Question

У меня есть несколько вложенных слоев в некоторых flexbox, которые динамически изменяют ширину в зависимости от длины текста внутри него.

Можно ли заставить содержащие флексбоксы также изменять ширину и обтекать при необходимости чисто с помощью 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>

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>