Flexbox布局中的box-shadow偏移问题与解决方案

在前端开发中，Flexbox是一个非常强大且灵活的布局工具，尤其在处理复杂的网格系统时。然而，有时我们会遇到一些细微的问题，比如输入框在动态调整布局时，其box-shadow出现偏移的情况。本文将详细探讨这种现象的成因，并提供解决方案。

问题描述

假设我们有一个基于Flexbox的网格布局，其中包含多行，每行内又有多个列。某些列在鼠标悬停时会显示隐藏的内容，这会导致行高度发生变化。当行高度变化时，位于该行下方的输入框的box-shadow可能会出现微小偏移，导致视觉上的不一致性。

实例展示

考虑以下HTML和CSS代码：

<divclass="resize-container">