如何在不向父 div 添加额外空间的情况下添加边距答案

【问题标题】：How to add margin without adding additional space to parent div如何在不向父 div 添加额外空间的情况下添加边距
【发布时间】：2019-10-01 06:32:22
【问题描述】：

我使用 react material ui 创建了一个侧边栏抽屉，并尝试在侧边栏抽屉样式上创建被点击的项目，就像在这个例子中一样 http://react-material-dashboard.devias.io/dashboard。

我使用这里的代码https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/drawers/ResponsiveDrawer.js 来创建抽屉。

并为活动项目添加这样的样式。

const styles = () => ({
  clickedItem: {
    borderLeft: "4px solid #0767DB",
    borderRadius: "4px",
    backgroundColor: "#F6F9FD",
    marginLeft: "10px"
  }
});

但是，由于我添加了marginLeft，侧边栏现在可以在 x 轴上滚动，因为它在右侧增加了额外的空间。我希望它在不影响右侧的情况下添加左侧边距。我尝试使用overflow: "hidden"。但是，y滚动条也是隐藏的，不能滚动。

即使我添加了marginLeft，如何修复它以使项目大小（宽度）仍然相同？

【问题讨论】：

尝试添加填充而不是边距。如果您仍然需要边距，请尝试，overflowX: 'hidden', OverflowY: 'auto' 这样，您将拥有 y 滚动条
@sarabs3 当我添加填充时，它不像我想要的那样。添加overflowX:"hidden"和overflowY:"auto"时，确实去掉了x轴的滚动条，仍然有y轴的滚动条。但是，即使没有滚动条，x 轴仍然可以滚动。

标签： css reactjs jsx

【解决方案1】：

我在链接的仪表板上玩了浏览器检查。

尝试将：width:auto; 添加到您传递活动元素的样式中。这将阻止边距被不加选择地添加到固定宽度并导致溢出。

作为奖励，添加 word-break: break-all; 可能有助于避免任何单数长词也导致抽屉溢出。

希望这会有所帮助！

【讨论】：