Html 对齐左框上的全宽搜索栏并设置填充

我需要在页面的左下角框中放置一个搜索栏，搜索栏必须全宽，高度为40px。但是，当我为输入设置一个填充以避免占位符太靠近边框时，搜索框不考虑父框的宽度，并占用了它的空间

代码笔：

身体 html{ 身高：100%； 宽度：100%； 保证金：0； } .盒子{ 身高：100%； 宽度：100%； } .盒子，上面{ 身高：30%； 宽度：100%； 背景色：中交； } .盒子.底部{ 背景色：ffffff； 身高：70%； 宽度：100%； 显示器：flex； 证明内容：之间的空间； } .盒子.底部.左边{ 背景色：F7F7； 边框：实心1px中交； 边界半径：8px； 利润上限：-100px； 左边距：50像素； 宽度：59.5%； 身高：100%； } .盒子.底部.右边{ 背景色：F7F7； 边框：实心1px中交； 边界半径：8px； 利润上限：-100px； 左边距：15px； 右边距：50px； 宽度：40%； 身高：100%； } .box.bottom.left.search wrap{ 显示器：flex； 宽度：100%； 高度：40px； } .box.bottom.left.search wrap.search box{ 宽度：100%； 身高：100%； 利润率：15px； } .box.底部.左侧.搜索框输入{ 宽度：100%； 身高：100%； 填充：0 15px； } 添加框大小：边框框；以100%宽度包含填充

身体 html{ 身高：100%； 宽度：100%； 保证金：0； } .盒子{ 身高：100%； 宽度：100%； } .盒子，上面{ 身高：30%； 宽度：100%； 背景色：中交； } .盒子.底部{ 背景色：ffffff； 身高：70%； 宽度：100%； 显示器：flex； 证明内容：之间的空间； } .盒子.底部.左边{ 背景色：F7F7； 边框：实心1px中交； 边界半径：8px； 利润上限：-100px； 左边距：50像素； 宽度：59.5%； 身高：100%； } .盒子.底部.右边{ 背景色：F7F7； 边框：实心1px中交； 边界半径：8px； 利润上限：-100px； 左边距：15px； 右边距：50px； 宽度：40%； 身高：100%； } .box.bottom.left.search wrap{ 显示器：flex； 宽度：100%； 高度：40px； } .box.bottom.left.search wrap.search box{ 宽度：100%； 身高：100%； 利润率：15px； } .box.底部.左侧.搜索框输入{ 宽度：100%； 身高：100%； 填充：0 15px； 框大小：边框框； }

---

完美的效验如神非常感谢。