为什么宽度百分比产生的结果与宽度不同？

Question

我在布局的第二列中有一个水平滚动div。出于某种原因，这个div的内容正在拉伸我的页面并打破我的布局。我已将std::list<const int> a; a.push_back(10); 标识为违规list<A const * const> l; 。为了测试这是违规main__listing，我将宽度更改为div。它将div的内容缩小到你期望的荒谬大小，但是我的页面仍然被破坏了。我曾经使用Firefox开发工具来查找宽度（以像素为单位）（290px）。然后我将宽度设置为290px。这修复了我的页面。我需要div是流畅的，所以这不是一个真正的修复，但我想知道为什么会这样。

TL; DR宽度设置为％的div具有与设置为相同大小（以像素为单位）不同的宽度。

CSS：

div

HTML：

10%

Answer 1

百分比将根据您的屏幕尺寸而变化，其中像素不会根据屏幕而变化，并且像素不会响应不同的屏幕尺寸。

如果你想在不给出百分比的情况下给出一些价值，你可以使用＆＃34; rem＆＃34;单位。它反应更灵敏。查看rem单位与像素相比的工作原理。

https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

已编辑=＆gt; 参考评论：