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 。