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

Question

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

TL;DR 宽度设置为 % 的 div 的宽度与设置为相同大小（以像素为单位）的 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/

已编辑 => 引用评论：