如何让一个 flex 元素在顺风的另一个 flex 元素中占用更多空间？

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%”。当浏览器调整大小（扩大或缩小）时，它们也会调整大小。您可以通过为父级提供一些宽度来处理它们的大小细节，并且父级的宽度将是卡片组件的限制宽度。