Javascript 扩展超过最大宽度的2列布局（顺风CSS）

在我提出这个问题之前，这里有一个相关代码的简要介绍

主页组件

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

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

const Home=（）=>{
返回(
{questions.map（（问题）=>(
))}
侧控
);
};

问题部分

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

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

const-Question=（{title，contentPreview}）=>(
{title}
{contentPreview}
);

正在包装主页的布局组件

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

const布局=（{children}）=>(
{儿童}
);

下面是一些正在发生的事情的截图

主页组件的包含div的屏幕截图有一个背景，这样您可以更好地看到它所在的位置

包含所有问题的带有div的屏幕截图为红色 并且（即将推出的）控件/侧栏颜色为绿色

最后，真正的问题是这个屏幕截图，因为我希望控件和问题列表并排，我的第一反应是给它们的包含div一个“flex”类，但当我这样做时，就会发生这种情况 控制装置被推到右侧，超出“限制”。如果有人知道或有任何关于为什么会发生这种情况的想法，请让我知道。多谢各位

（注：请不要回答并说“使用引导”或使用“x ui框架”，因为我正在使用tailwind并希望留在tailwind）

我希望控件和问题列表同时出现

在这种情况下，在两个部分上使用

flex-1

，使宽度均匀。否则，您仍然可以指定宽度，如问题部分

flex w-8/12

和侧面控制部分

flex w-4/12