Preact+Tailwind+daisyUI：实现视口与相邻Div控制的可滚动表格

当前实现方案 #

我用Preact、Tailwind CSS和daisyUI开发应用，界面包含两个标签页，每个标签页左侧是textarea，右侧为说明/结果区域：

• 标签切换采用daisyUI的radio tab lifted组件实现
• 每个标签面板通过Tailwind的columns-2类设置两列布局

核心代码如下：

<div role="tablist" className="tabs tabs-lifted tabs-lg">
  <input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Tab 1" />
  <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6 columns-2">
    <Tab1 />
  </div>

  <input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Tab 2" checked />
  <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6 columns-2">
    <Tab2 />
  </div>
</div>

遇到的问题 #

问题集中在标签页2：左侧是textarea，右侧是行列数动态变化的表格（采用daisyUI的固定行列表格组件），核心代码片段：

<textarea
  rows={15}
  cols={40}
/><br />
<div className="overflow-x-auto">
  <table className="table table-xs table-pin-rows table-pin-cols">
...
</div>

• 表格未显示时，布局符合预期
• 表格出现后，会被挤到远处，且标签栏宽度被压缩
• 尝试改用grid grid-cols-4替代columns-2，表格不再偏移，但布局仍不符合需求
• 给表格添加flex shrink w-30类，无法缩小表格
• 已通过开发者工具禁用样式排查，未找到问题根源

预期布局目标 #

我需要实现单屏布局，满足以下要求：

• 表格宽度占满屏幕剩余空间
• 表格高度无限制，但最大高度与textarea一致
• 页面底部有固定高度的footer，textarea高度需填充标签栏与footer之间的空隙
• 移动端表格需位于textarea下方，宽度固定且可滚动，高度无限制
• （可选）textarea与表格宽度按黄金比例分配：若两者总宽度小于视口宽度，则按黄金比例分配并居中；否则textarea最小宽度为40单位

推测方向 #

我认为可以通过Flex或Grid布局实现目标，但首先需要解决当前的布局异常问题。

内容的提问来源于stack exchange，提问作者Ooker