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

Question

我在布局的第二列中有一个水平滚动div。出于某种原因，这个div的内容正在拉伸我的页面并打破我的布局。我已经确定main__listing是令人讨厌的div。为了测试这是令人讨厌的div，我将宽度改为10%。它将div的内容缩小到你期望的荒谬大小，但是我的页面仍然被破坏了。我曾经使用Firefox开发工具来查找宽度（以像素为单位）（290px）。然后我将宽度设置为290px。这修复了我的页面。我需要div是流畅的，所以这不是一个真正的修复，但我想知道为什么这是。

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

CSS：

.main__listings {
  width: 100%;
}
.horizontal_scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.card {
  flex: 0 0 200px;
  margin: auto 10px;
}

HTML：

<div className="main__listings">
  <h1>Local Competitions</h1>
  <div className="horizontal_scroll">
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
  </div>
</div>

Answer 1

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

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

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

编辑=>参考评论：