如何完全包装任意元素？

Question

如何使用@Qualifier或<span>完全包装任意元素？ “完全”是指我希望它的边界框完全包含内部的任何内容。

在下面的示例中，我在<div>附近设置了<span>，但正如您从屏幕截图中看到的那样，<input>实际上位于里面 <span>并未完全包含它。

如果我将<input>更改为<span>，则它会将<div>包好，但<input>默认为100％宽，内部元素为不一定是全宽的，所以这也不起作用！

那么如何紧紧包裹任意元素？

这是一些代码。您必须使用DevTools检查<div>跨度，看它们是否完全包含内容。

.wrapper

.wrapper {
   /* what styles can I use here to wrap arbitrary elements? */  
}

.wideinput {
  width: 100%;
}