弹性布局的一个有趣问题：宽度超长溢出

import React, { useState } from 'react';
import { Form, Radio } from '@tencent/tea-component';
import { MockTodoTable } from './mock-todo-table';
import './original-layout-demo.less';
 
export const OriginalLayoutDemo: React.FC = () => {
  const [mode, setMode] = useState<'0' | '1' | '2'>('0');
 
  return (
    <div className="original-layout-demo">
 
      <div className="demo-controls">
        <Radio.Group value={mode} onChange={setMode as any}>
          <Radio name="0">❌  (width: 100%)</Radio>
          <Radio name="1">✅  (width: 0 + min-width: 100%)</Radio>
          <Radio name="2">❌  (width: 0 + max-width: 100%)</Radio>
        </Radio.Group>
      </div>
 
      {/* 场景1：Table 布局 (原始 Form) */}
      <div className={'task-layout'}>
        <h3>场景1：Table 布局 (display: table)</h3>
        <Form>
          <Form.Item label="待办事项" className="todo-table-form-item">
            <MockTodoTable disabled mode={mode} />
          </Form.Item>
        </Form>
      </div>
 
      {/* 场景2：Flex 布局 */}
      <div className={'task-layout'} style={{ marginTop: 20 }}>
        <h3>场景2：Flex 布局 (display: flex)</h3>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
          <div style={{ minWidth: 100, flexShrink: 0 }}>待办事项：</div>
          <div style={{
            width: '100%',
          }}>
            <MockTodoTable disabled mode={mode} />
          </div>
        </div>
      </div>
 
      {/* 场景3：Grid 布局 */}
      <div className={'task-layout'} style={{ marginTop: 20 }}>
        <h3>场景3：Grid 布局 (display: grid)</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: 10 }}>
          <div>待办事项：</div>
          <div style={{ width: '100%' }}>
            <MockTodoTable disabled mode={mode} />
          </div>
        </div>
      </div>
 
    </div>
  );
};
 

import React, { useMemo } from 'react';
import { PrimaryTable } from 'tdesign-react';
import './mock-todo-table.less';
 
 
interface MockTodoTableProps {
  disabled?: boolean;
  mode?: '0' | '1' | '2'
}
 
export const MockTodoTable: React.FC<MockTodoTableProps> = ({ disabled = false, mode = '0' }) => {
  const style = useMemo(() => ({
    0: { width: '100%' },
    1: { width: '0', minWidth: '100%' },
    2: { width: '0', maxWidth: '100%' },
  }[mode]), [mode]);
  // Mock 数据 - 模拟真实的待办事项数据
  const mockData = [
    {
      subTaskId: 'TASK-2025-001',
      subTaskLink: '#',
      contents: '系统维护/日常运维/性能优化',
      toDoManager: '张三',
      toDoDescription: '修复登录问题导致的用户无法正常访问系统，需要优化数据库查询性能',
      toDoProgress: '进行中，已完成 60%，预计明天完成',
      risk: '低风险',
      priority: '高',
      toDoStatus: 'processing',
      startTime: '2025-01-01',
      cusReqTime: '2025-01-05',
      tags: '紧急,重要,系统维护',
      toDoItemsTime: '2天3小时',
      action: 'edit',
    },
    ......
  ];
 
  // 状态映射
  const statusMap: Record<string, string> = {
    pending: '待处理',
    processing: '处理中',
    completed: '已完成',
    cancelled: '已取消',
  };
 
  // 状态样式映射
  const STATUS_CLASS_MAP: Record<string, string> = {
    pending: 'status-pending',
    processing: 'status-processing',
    completed: 'status-completed',
    cancelled: 'status-cancelled',
  };
 
  // 完全复制原始 TodoTable 的列配置
  const columns = [
    {
      colKey: 'document',
      title: '单据ID',
      width: 85,
      fixed: 'left' as const,
      cell: ({ row }: any) => (
        <a href={row.subTaskLink} target="_blank" rel="noopener noreferrer">
          {row.subTaskId}
        </a>
      ),
    },
    {
      colKey: 'contents',
      title: '服务目录',
      width: 135,
    },
    {
      colKey: 'toDoManager',
      title: '处理人',
      width: 100,
    },
    {
      colKey: 'toDoDescription',
      title: '标题',
      width: 140,
    },
    {
      colKey: 'toDoProgress',
      title: '进展',
      width: 120,
    },
    {
      colKey: 'risk',
      title: '风险',
      width: 120,
    },
    {
      colKey: 'priority',
      title: '优先级',
      width: 65,
    },
    {
      colKey: 'toDoStatus',
      title: '状态',
      width: 60,
    },
    {
      colKey: 'startTime',
      title: '任务开始时间',
      width: 100,
    },
    {
      colKey: 'cusReqTime',
      title: '计划完成时间',
      width: 100,
    },
    {
      colKey: 'tags',
      title: '任务标签',
      width: 200,
    },
    {
      colKey: 'toDoItemsTime',
      title: '耗时',
      width: 120,
    },
    {
      title: '操作',
      colKey: 'operate',
      width: 100,
      fixed: 'right' as const,
      .......
    },
  ];
 
  // 计算总宽度
 
  return (
    <div className="table-area" style={style}>
      <PrimaryTable
        rowKey="subTaskId"
        className="mock-table"
        size="small"
        hover
        data={mockData}
        columns={columns}
      />
    </div>
  );
};

  <div class="flex-container" style="display: flex">  <!-- 父父元素，width: auto -->
    <div class="flex-item" style="width: 100%">       <!-- 父元素，width: 100% -->
      <div class="table-area" style="width: 100%">    <!-- 子元素，width: 100% -->
        <PrimaryTable />                              <!-- 孙元素，实际宽度1445px -->
      </div>
    </div>
  </div>