如何设置所有flex元素宽度相同以适应最长文本？

Question

我有两组复选框，当鼠标hover时，每个复选框都有一个“环”（我只是在下面的代码中简化了这个，环直接显示，反正它不是那么重要。）

问题是我需要保持所有复选框行的宽度相同，宽度也应该适应最长的文本，所以所有的“环”看起来都一样。 （在这种情况下，4个环的宽度都应该与checkbox1的宽度相同）

 .group { display: flex; flex-direction: column; }.checkbox { border: 2px solid red; border-radius: 6px; width: fit-content; }

 <div class="group"> <h2>Group 1</h2> <div class="checkbox"><input type="checkbox" id="checkbox1"><label for="checkbox1">checkbox1 super super long texttexttexttexttexttexttexttexttexttext</label></div> <div class="checkbox"><input type="checkbox" id="checkbox2"><label for="checkbox2">checkbox2</label></div> </div> <div class="group"> <h2>Group 2</h2> <div class="checkbox"><input type="checkbox" id="checkbox3"><label for="checkbox3">checkbox3 abcdabcdabcd abcdabcdabcdabcd</label></div> <div class="checkbox"><input type="checkbox" id="checkbox4"><label for="checkbox4">checkbox4 abcdabcdabcd</label></div> </div>

无论如何要实施它？ （不能设置固定值，文字长度是动态的）

Answer 1

您应该将width: fit-content分配给父容器，而不是子容器。

此外，我将所有内联 styles 更改为外部 styles 以获得更好的可视化效果：

 .group { display: flex; flex-direction: column; width: fit-content; }.input-group { border: 2px solid red; border-radius: 6px; }

 <div class="group"> <h2>Group 1</h2> <div class="input-group"> <input type="checkbox" id="checkbox1" /> <label for="checkbox1">checkbox1 super super long texttexttexttexttexttexttexttexttexttext</label> </div> <div class="input-group"> <input type="checkbox" id="checkbox2" /> <label for="checkbox2">checkbox2</label> </div> </div> <div class="group"> <h2>Group 2</h2> <div class="input-group"> <input type="checkbox" id="checkbox3" /> <label for="checkbox3">checkbox3 abcdabcdabcd abcdabcdabcdabcd</label> </div> <div class="input-group"> <input type="checkbox" id="checkbox4" /> <label for="checkbox4">checkbox4 abcdabcdabcd</label> </div> </div>