Tailwind: div is expanding when it has to many children-CodePudding

I'm new to Tailwind and I don't know why my div is expanding when it should just get the remaining width from the row. If I put too many children inside the div, the whole page expands.

<!doctype html>
<html >

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body >
  <div >
    <div >
      <div ></div>
      <div >
        <div >
          <div >
            Button
          </div>
          <div >
            <div >
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>

            </div>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</body>

</html>

I want the page to look like this: Result I want to achieve

The upper right part of the page should only add a scroll bar if too many items have been added, instead of expanding the page.

Thank you for your help!

CodePudding user response：

I have added min-w-0 and overflow-auto to your code to fix the issue.

<!doctype html>
<html >

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body >
  <div >
    <div >
      <div ></div>
      <div > <!-- HERE -->
        <div > <!-- AND HERE -->
          <div >
            Button
          </div>
          <div >
            <div >
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>
              <div >
                item
              </div>

            </div>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</body>

</html>