Css 显示内联容器上不需要的水平滚动

我有一个容器，其中有两个子容器，我希望内联显示。把它想象成一个容器元素，上面有一个协议文本

以下是显示当前代码的代码笔：

问题是，我无法弄清楚如何正确地将标签与复选框并排显示，使其不会溢出。这些文本往往很长，这就是问题所在

目前我在盒子里看到了一个水平的卷轴，我不知道它是从哪里来的

知道我在代码中遗漏了什么吗

.container {
  width: 288px;
  border: 1px solid;
  padding: 6px 24px;
  display: block;
  white-space: nowrap;
  overflow: auto;
}

.checkbox,
.label {
  display: inline-block;
}

.checkbox {
  width: 12px;
  margin-right: 12px;
}

.label {
  word-break: break-word;
  white-space: normal;
  vertical-align: middle;
  width: calc(100% - 24px)
}

---

您获得滚动条是因为您的

.container

具有

溢出：auto

和

空白：nowrap

如果我必须这样做，我将删除这些属性，并使用flexbox以更干净的方式解决它，而无需进行调整用户代理样式的显式计算，因为不同的浏览器将对这些元素应用不同的样式

.container {
  display: flex;
}

---

实际问题与本机复选框中的边距无关，而是与DOM中的实际间距字符有关

检查此代码笔：

而不是：

<div class="container">
  <span class="checkbox">
    <input type="checkbox" />
  </span>
  <span class="label">this is a really long label that I would like to wrap</span>
</div>

这是一个很长的标签，我想包装

是的

这是一个很长的标签，我想包装

卷轴现在不见了

---

这可能与codepen呈现代码的方式有关，但在我的实际应用程序中，我不必为此烦恼。但在我的例子中，很难验证，因为我使用的是JSX+React。

删除

溢出：滚动
修复了您的问题。我故意将其放在那里，以查看溢出的原因。基本上，我不明白溢出来自何处，我不确定我是否遵循了。您的代码笔显示与复选框一致的文本，并且文本不会在边框外流动。那么问题是什么呢？问题是我的应用程序中的这个容器是一个通用容器，我无法从中移除溢出。因此，我想了解为什么浏览器在本例中添加滚动条。希望它现在更有意义。谢谢你的建议。我同意我们不应该依赖浏览器的边距。也同意flexbox会更加优雅。虽然实际修复与checkbox元素中的边距无关，但与实际DOM中的空白有关。我将发布另一个答案。这是一个重复，它准确地解释了这里发生了什么以及为什么您的修复程序解决了它，它与Codepen无关：）谢谢这真的很有帮助：）
<div class="container">
  <span class="checkbox">
    <input type="checkbox" />
  </span><span class="label">this is a really long label that I would like to wrap</span>
</div>