让我知道如果this是你正在寻找的，如果不是请详细说明。

<div class="box-border flex w-auto flex-row gap-2 rounded-2xl border p-4 my-4 mx-4">
  <div class="grow-0">
    <div class="flex h-full flex-col items-center justify-center">
      <div class="ml-50%">icon</div>
    </div>
  </div>
  <div class="grow">
    <div class="flex flex-col">
      <div>
        <h2>Title</h2>
        <p>Subtitle - Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
    </div>
  </div>
  <div class="">
    <div class="flex h-full items-center justify-end">
      <button class="rounded-full flex flex-wrap bg-green-100 px-4">Start action</button>
    </div>
  </div>
</div>

原因是设置硬宽度不会使任何内容换行。
如果您只想 Package 最后一个弹性盒项目，可以像this一样完成：

<!-- only last item will wrap -->
<div class="box-border flex w-auto flex-row flex-wrap gap-2 rounded-2xl border p-4 my-4 mx-4">
  <div class="shrink">
    <div class="flex h-full flex-row items-center justify-center">
      <div class="ml-50%">icon</div>
      <div class="flex flex-col">
      <div>
        <h2>Title</h2>
        <p>Subtitle - Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
    </div>
    </div>
  </div>
  <div class="shrink">
    
  </div>
  <div class="">
    <div class="flex h-full items-center justify-end">
      <button class="rounded-full w-32 bg-green-100 px-4">Start action</button>
    </div>
  </div>
</div>

但是我看到你有很多嵌套的 Package 器和边距，当你使用flex-box的时候效果不太好，我会尝试简化这个，用flex对齐和调整来代替边距。

您可以将图标和title/subtitle部件 Package 在其自己的单独div中，作为按钮部件的同级，然后在父容器中使用justify-between。
这将在图标/标题/副标题和按钮之间添加一个空格，这样当有足够的空间时，前者将保持在左侧，后者保持在右侧。当没有足够的空间时，按钮部分将换到第二行。

<div class="box-border flex justify-between w-auto flex-wrap gap-2 rounded-2xl border p-4 my-4 mx-4">
  <div>
    <div class="grow-0">
    <div class="flex h-full flex-col items-center justify-center">
      <div class="ml-50%">icon</div>
    </div>
  </div>
  <div className="grow">
    <div class="flex flex-col">
      <div>
        <h2>Title</h2>
        <p>Subtitle - Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
    </div>
  </div>
  </div>
  <!-- I want the following to wrap onto its own line at a certain viewport -->
  <div>
    <div class="flex h-full items-center justify-end">
      <button class="w-32 rounded-full bg-green-100">Start action</button>
    </div>
  </div>
</div>

<div class="box-border flex flex-row gap-2 items-center justify-between w-full md:w-auto rounded-2xl border p-4 my-4 mx-4">
  <div class="flex-shrink-0">
    <div class="flex h-full flex-col items-center justify-center">
      <div class="ml-50%">icon</div>
    </div>
  </div>
  <div class="flex-grow">
    <div class="flex flex-col">
      <div>
        <h2>Title</h2>
        <p>Subtitle - Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
    </div>
  </div>
  <!-- The following div will wrap onto its own line on small screens -->
  <div class="flex flex-row items-center justify-end flex-wrap">
    <button class="w-32 rounded-full bg-green-100">Start action</button>
  </div>
</div>

我已经将flex-wrap实用程序类添加到“Start action”flexbox区域，以允许它在小屏幕上自动换行。我们还在第二个flexbox容器上使用了flex-grow实用程序类，以允许它增长以填充可用空间。
为了控制整个Flexbox容器的宽度，我们添加了w-full md：w-auto实用程序类，这将在小屏幕上设置宽度为100%，并允许在大屏幕上根据内容调整宽度。