将父母紧紧包裹在孩子周围，以免引入新包装

Question

此后的确切时间是THIS。

提供的解决方案是

1. "js, jquery"，jquery是def。不想要的。还要避免使用普通的js。
2. "css, html only"，但很老套，不够普遍。

如何在不进行黑客攻击，保持通用性和动态性且不必使用javascript的情况下进行归档？

我真的不在乎使用哪种CSS技术。弹性，表格，网格。只要它具有一般性和动态性。

这里是一个操场==> jsfiddle <==我已经准备好了。

红色边界线应尽可能小，而不会造成进一步的缠绕。

<h3>
3. with window resize (resize the windows width )
</h3>
looks like
<div class="IwillForceAgivenWidth" style="width: 100%">
  <div class="parent">
    <button class="child">some text here longer Text</button> 
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
  </div>
</div>