如何让一个 flex 元素在另一个带有顺风的 flex 元素中占用更多 space？

Question

你好，我已经为此工作了几个小时，并尝试了暴力破解，我想出了很多不同的解决方案，但我似乎没有让它工作。

目标：当屏幕更大时，让卡片占据更多宽度

这是我的根组件：

function App() {
  const event = new Date(Date.UTC(2000, 11, 20, 3, 0, 0));

  return (
    <div className="bg-gray-200 p-8 min-h-screen flex items-center justify-center antialiased text-gray-900 flex-col">
      <Expenses date={event}></Expenses>
      <Expenses date={event}></Expenses>
      <Expenses date={event}></Expenses>
    </div>
  );
}

export default App;

这是费用部分

export default function Expenses(props) {
  return (
    <div className="">
      <ExpenseItem time={props.date}></ExpenseItem>
    </div>
  );
}

这是费用项目组件

export default function ExpenseItem(props) {
  return (
    <div className="bg-white rounded-lg overflow-hidden border flex h-auto mt-4 shadow">
      <CalendarItem date={props.time}></CalendarItem>
      <div className="p-4">
        <h4 className="font-semibold text-lg">All my money for software engineering</h4>
        <div>10000€</div>
        <div className="mt-4 inline-block bg-indigo-300 text-white px-4 py-1 rounded-lg shadow-lg uppercase tracking-wide font-semibold text-sm ">
          <a href="">Delete</a>
        </div>
      </div>
    </div>
  );
}

我感谢每一个输入！谢谢！

Answer 1

向卡片及其父组件添加“宽度：100%”。当浏览器调整大小时（扩展或缩小），它们也会调整大小。您可以通过给父级一些宽度来处理它们大小的细节，父级的宽度将限制卡片组件的宽度。

如何让一个 flex 元素在另一个带有顺风的 flex 元素中占用更多 space？

How can I make a a flex element take up more space in an other flex element with tailwind?

css

flexbox

reactjs

tailwind-css