2 col 布局扩展超过最大宽度（TAILWIND CSS）

Question

在我问这个问题之前，这是相关代码的快速概述

主页组件

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

包含 HomePage 的 Layout 组件

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

这是一些正在发生的事情的屏幕截图

带有背景的 HomePage 组件的包含 div 的屏幕截图，因此您可以更好地看到它在哪里https://gyazo.com/b8aa356912f973f854299c665c66de76

包含所有颜色问题的 div 的屏幕截图是红色，（即将）控件/侧边栏以绿色https://gyazo.com/2ceb6a1277f1de4506531a2bcf0b9b17

最后，真正的问题是这个截图，因为我希望控件和问题列表并排，我的第一反应是给它们两个包含的 div 一个“flex”的 class 但是当我这样做时发生https://gyazo.com/af6206b95dc684bbcb316a8d33362b62并且控件超出了右侧的“限制”。 如果有人知道或对为什么会发生这种情况有任何想法，请告诉我。 谢谢你

（PS。请不要回答说“使用引导程序”或使用“x ui 框架”，因为我正在使用顺风并且确实想留在顺风中）

Answer 1

我希望控件和问题列表并排

在这种情况下，请在两个部分上使用flex flex-1以获得均匀的宽度。 否则，您仍然可以指定宽度，例如问题部分flex w-8/12和侧面控制部分flex w-4/12 。