在滚动列表中的最后一项和父项的边框之间添加空格答案

【问题标题】：Add space between the last item in a scrolling list and the border of the parent在滚动列表中的最后一项和父项的边框之间添加空格
【发布时间】：2020-12-14 19:25:03
【问题描述】：

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

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

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

边距用于将元素从包装器中移入，而不是向外扩展包装器。

如需完整说明，请查看here。

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

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

【讨论】：