Html 文本换行时，自定义复选框垂直拉伸

我有一个样式化的复选框，它是一个容器的子对象，并带有一些文本。复选框和文本是父项的子项的原因是，它们可以彼此相邻，并在UI上垂直居中。这对我来说很好；然而，我注意到复选框开始从一个完美的圆圈变成更多的椭圆形，因为文本开始包装成多行（在移动设备上文本有两行长，在桌面上只有一行）。如何修复此问题，使复选框不会随着文本换行而拉伸？下面是我的html和样式，谢谢

。选择加入{
显示器：flex；
对齐项目：居中；
颜色：#f4a11e；
}
输入[type='checkbox']{
位置：相对位置；
利润率：17像素15像素0；
光标：指针；
宽度：20px；
高度：20px；
-webkit外观：无；
背景：透明；
边框：1px实心#f4a11e；
大纲：无；
边界半径：50%；
过渡：0.5s；
}
输入[type='checkbox']：在{
内容：''；
位置：绝对位置；
最高：45%；
左：50%；
宽度：4px；
高度：10px；
不透明度：0；
右边框：1px实心#f4a11e；
边框底部：1px实心#f4a11e；
变换：平移（-50%，-50%）旋转（40度）；
过渡：0.2s；
}
输入：选中[type='checkbox']：之前{
不透明度：1；
}

选择加入以获得最新的云洞察和行业深度体验。

在输入[type='checkbox']{}部分的CSS代码中，尝试使用

最小宽度：20px而非
宽度：20px

虽然我必须在opt-in-div的属性中设置max-width来测试它，但在一个带有复制/粘贴代码的测试实现中为我工作

我没有技术上的解释，但我相信这与相对位置或显示有关：flex覆盖指定的宽度/高度（以像素为单位）。
使用最小宽度：20px；拉伸了很多，但最大宽度：20px；帮助配合最小高度：20px真棒，很高兴你能正常工作。老实说，我可能会使用SVG图像，但您的复选框看起来确实不错。