【发布时间】：2021-10-15 10:28:22
【问题描述】：
我有一组嵌套的 HTML，元素由一个父元素 (AssetContainer) 和两个并排的主要嵌套部分 (MediaViewContainer 和 AssetDetailsContainer) 组成。右侧组件 (AssetDetailsContainer) 有几个子 div，但它们没有自己的样式。 我的问题是右侧组件未按其样式的大小呈现。 AssetDetailsContainer CSS 将宽度设置为 600px，这会出现在检查器中，但随后会使用一个不同的、小得多的值来实际渲染元素。如果我设置一个较大或较小的值，它会增长和缩小，但在设置的值的某个非整数范围内。虽然“缩放”可能是一个不好的术语，因为渲染值/输入值的比率不是一个常数。
我正在为涉及宽度的主要元素附加检查器面板的一些图像，显示它们的 HTML、CSS 和实际呈现的属性。我知道图像并不理想，但这些似乎最能代表一个地方的相关数据。
AssetDetailsContainer（右侧子元素）检查器快照
查看检查器中显示的结果 AssetDetailsContainer，我们在 CSS 中看到原始的 600px，但随后它被渲染为 104.5px。
MediaViewContainer（左侧子元素）检查器快照
我在布局方面缺少什么？
【问题讨论】：
-
边框可能会导致这种情况。尝试将
box-sizing: border-box应用于所有元素。 -
感谢您的建议，我测试了将
box-sizing: border-box，添加到所有元素，然后只是涉及不同组合的元素，它没有效果。 -
我发现如果我将 AssetDetailsContainer 嵌套在另一个
<div>中，那么大小是正确的。它没有修复它并生成我想要的布局，但它指出了 AssetContainer 的 flex 定位和 AssetDetailsContainer 的相对定位的一些问题。