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

【问题标题】：2 col layout expanding past max width (TAILWIND CSS)2 col 布局扩展超过最大宽度（TAILWIND CSS）
【发布时间】：2021-07-13 06:21:19
【问题描述】：

在我问这个问题之前，这里是相关代码的简要说明

主页组件

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”类但是当我这样做会发生 https://gyazo.com/af6206b95dc684bbcb316a8d33362b62 并且控件被推到右侧的“限制”之外。如果有人知道或对为什么会发生这种情况有任何想法，请告诉我。谢谢

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

【问题讨论】：

标签： javascript css reactjs layout tailwind-css

【解决方案1】：

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

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

【讨论】：