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

Posted 2023-03-07

【中文标题】2 col 布局扩展超过最大宽度（TAILWIND CSS）

【英文标题】：2 col layout expanding past max width (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 框架”，因为我正在使用顺风并且确实想留在顺风中）

【参考方案1】：

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

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