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

Hello so I have been working on this for hours and tried brute forcing it, with as many different solutions I could think of, but I don't seem to be getting it to work.

Goal: make the cards take up more width, when the screen is bigger

This is my root component:

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;

This is the Expenses Component

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

This is the Expense Item Component

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>
  );
}

I am grateful for every input! Thank you!

CodePudding user response：

Add "width: 100%" to the card and its parent component. When Browser resize(expand or shrink), they will resize too. You can handle the detail of their size by giving some width to the parent and the parent's width will be limit width of the card component.