我要启用项列表的水平滚动。

import "./styles.css";

const cardData = [
  {
    title: "Title One",
    description: "Description One"
  },
  {
    title: "Title Two",
    description: "Description Two"
  },
  {
    title: "Title Three",
    description: "Description Three"
  },
  {
    title: "Title Four",
    description: "Description Four"
  },
  {
    title: "Title Five",
    description: "Description Five"
  },
  {
    title: "Title Six",
    description: "Description Six"
  }
];

function Card({ title, description }) {
  return (
    <article>
      <h3>{title}</h3>
      <p>{description}</p>
    </article>
  );
}

export default function App() {
  return (
    <div className="App">
      <div className="scrollContainer">
        {cardData.map(({ title, description }) => (
          <Card title={title} description={description} key={title} />
        ))}
      </div>
    </div>
  );
}

到目前为止，我已经启用了水平滚动，但是带有蓝色边框的子容器无法伸展到带有紫色边框的父容器的全部宽度

.App {
  font-family: sans-serif;
  text-align: center;
  border: 5px solid purple;
  overflow: hidden;
  width: 1224px;
  margin: 0 auto;
}

.scrollContainer {
  display: flex;
  flex-flow: column;
  margin-left: auto;
  align-items: center;
  width: 400px;
  height: 800px;
  overflow: scroll;
  scrollbar-width: none; /* make scrollbar invisible for Firefox */
  border: 5px solid blue;
  transform: rotate(-90deg);
  position: relative;
  right: 200px;
}

.scrollContainer::-webkit-scrollbar {
  width: 0; /* Remove scrollbar space */
  /* background: transparent; make scrollbar invisible */
}

article {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 50px;
  margin-bottom: 20px;
  border: 1px solid black;
  transform: rotate(90deg);
  width: 400px;
  flex: 0 0 400px;
}

我想我可以给父容器.Appposition: relative和.scrollContainerposition: absolute并将子容器拉伸到它的全部宽度 但当我给出.scrollContainerposition: absolute时，.App拒绝环绕其子级，即使它有position: relative.

如何将子项扩展到其父项的全宽度？

CodeSandBox链接

顺晟科技：