2 col layout expanding past max width (TAILWIND CSS)

Question

Here's a quick rundown of the relevant code before I ask this question

The HomePage component

const Home = () => {
  return (
    <div>
      <div>
        {questions.map((question) => (
          <div key={question.id} className="mb-4">
            <Question
              title={question.title}
              contentPreview={question.contentPreview}
            />
          </div>
        ))}
      </div>
      <Card className="p-4">Side Controlls</Card>
    </div>
  );
};

The Question component

const Question = ({ title, contentPreview }) => (
  <Card className="p-4 break-words">
    <h1 className="mb-4 text-lg text-blue-600">{title}</h1>
    <p className="text-gray-500">{contentPreview}</p>
    <div className="flex mt-4 gap-4">
      <InfoIcon
        icon={<HeartIcon />}
        info={20}
        iconClassName="text-red-400 w-6 h-6"
        infoClassName="text-gray-500"
      />
      <InfoIcon
        icon={<CommentIcon />}
        info={40}
        iconClassName="text-blue-400 w-6 h-6"
        infoClassName="text-gray-500"
      />
    </div>
  </Card>
);

The Layout component that HomePage is being wrapped in

const Layout = ({ children }) => (
  <div className="bg-gray-100">
    <div className="flex flex-col min-h-screen">
      <NavBar />
      <div className="mt-4 max-w-7xl self-center w-full px-4">{children}</div>
    </div>
  </div>
);

And here are some screenshots of whats happening

A screenshot with the containing div of the HomePage Component having a background so you can see better where it is https://gyazo.com/b8aa356912f973f854299c665c66de76

A screenshot with the div that containing all the questions colored is the reddish color and the (soon to be) controls/sidebar colored in green https://gyazo.com/2ceb6a1277f1de4506531a2bcf0b9b17

And finally, the real problem is this screenshot, because I want both the controls and List of questions to be side by side my first instinct is to give the containing div of both of them a class of "flex" but when I do that this happens https://gyazo.com/af6206b95dc684bbcb316a8d33362b62 and the controls get push beyond the "limits" to the right. if anyone knows or has any ideas about why this might be happening please let me know. thank you

(PS. please do not answer and say "use bootstrap" or use "x ui framework instead" because I'm using tailwind and do want to stay in tailwind)

Answer 1

I want both the controls and List of questions to be side by side

In such case, use flex flex-1 on both the sections to have even width . Else, you can still specify a width like question section flex w-8/12 and the side controls section flex w-4/12 .