FlexBox 中的居中对齐导致可滚动 div 中的项目被剪裁

Question

const { useState } = React;

const App = () => {
  const [items, setItems] = useState([]);
  const [numItems, setNumItems] = useState(0);

  return (
    <div className="w-full">
      <div className="flex p-5 align-center w-full flex-col">
        <div className="flex justify-center">
          <button
            className="border-red-500 border-2 m-2 p-2"
            onClick={() => {
              addItems("Item " + (numItems + 1));
              setNumItems(numItems + 1);
            }}
          >
            Add Item
          </button>
        </div>

        <div className="flex flex-nowrap justify-center align-center p-2 overflow-x-auto border-2 border-blue-700">
          {items.map((item) => (
            <div className="m-2 p-2 border-red-800 border-2 flex-shrink-0" key={item}>
              <h1>{item}</h1>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  function addItems(item) {
    setItems([...items, item]);
  }
};

ReactDOM.render(<App />, document.getElementById("app"));

我正在使用 Tailwind css 和 React.js

在上面的组件中，我有一个按钮，它只是将 div 水平添加到自动滚动的 flexbox。问题是，我无法从中心添加 div，即如果我添加 justify-center 或 justify-content: center;通常 css，开头的项目会被剪掉。我怎样才能无限期地添加项目，而不会丢失项目并保持滚动能力？

密码本 link : https://codepen.io/vineet192/pen/jOGZQZE

Answer 1

我对您的代码段做了一些修改，以使其正常运行。

基本上剪裁是因为溢出+中心。

const { useState } = React;

const App = () => {
  const [items, setItems] = useState([]);
  const [numItems, setNumItems] = useState(0);

  return (
    <div className="w-full">
      <div className="flex p-5 align-center w-full flex-col">
        <div className="flex justify-center">
          <button
            className="border-red-500 border-2 m-2 p-2"
            onClick={() => {
              addItems("Item " + (numItems + 1));
              setNumItems(numItems + 1);
            }}
          >
            Add Item
          </button>
        </div>

        <div className="flex flex-nowrap justify-center align-center p-2 overflow-x-hidden border-2 border-blue-700">
          <div className='flex overflow-x-auto'>
          {items.map((item) => (
            <div
              className="m-2 p-2 border-red-800 border-2 flex-shrink-0"
              key={item}
            >
              <h1>{item}</h1>
            </div>
          ))}
          </div>
        </div>
      </div>
    </div>
  );

  function addItems(item) {
    setItems([...items, item]);
  }
};

ReactDOM.render(<App />, document.getElementById("app"));

FlexBox 中的居中对齐导致可滚动 div 中的项目被剪裁

Justify-center in FlexBox causes items in scrollable div to get clipped

css

scroll

flexbox

reactjs

tailwind-css