javascript - 在滚动列表的最后一项和父项的边框之间添加空间

Question

我试图在我的列表中的最后一项和父容器的边框之间留出间距。我为子元素设置的边距似乎在第一个元素和父容器的开头之间增加了空间，但对最后一个元素没有同样的影响，我不确定为什么。如果有人可以向我解释为什么会发生这种情况以及如何解决它，我将不胜感激。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    flexDirection: "row",
    scrollSnapType: "x mandatory",
    width: "500px",
    height: "100px",
    border: "solid black 1px",
    overflow: "auto",
    justifyContent: "flex-start",
    alignItems: "center",
    backgroundColor: "blue"
  },
  item: {
    scrollSnapAlign: "center",
    height: "50px",
    minWidth: "50px",
    backgroundColor: "red",
    margin: "10%"
  }
}));

export default function SimpleCollapse() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
      <div className={classes.item}></div>
    </div>
  );
}

img1 img2

Answer 1

Margins are for moving an element in from the wrapper, not expanding the wrapper outwards.

有关完整说明，请查看 here .

---

解决方法是在容器中添加一个伪::after元素。这个想法的灵感来自 this post但实现方式不同。

const useStyles = makeStyles((theme) => ({
  root: {
    ...
    "&::after": {
      content: `""`,
      minWidth: "0.1px", // 0.01px will not work ¯\_(ツ)_/¯
      height: "100%"
    }
  },
  ...
}));