Repository: flutter
Issue: `DataColumn` overflow in canvaskit in a certain language
Labels: framework,f: material design,a: internationalization,a: error message,e: web_canvaskit,has reproducible steps,P2,team-design,triaged-design,found in release: 3.22,found in release: 3.23

### Steps to reproduce

Run the code on Chrome.

I think it occurs when there are long values ​​in a specific column.
Exception occurs when the length of the value of a column is smaller than the column name.

This does not occur when the column name is English, but occurs when Korean or Japanese are used.



### Expected results

No exception

### Actual results

Excaption caught

```A RenderFlex overflowed by 9.7 pixels on the right.```

### Code sample

<details open><summary>Code sample</summary>

```dart
import 'package:flutter/material.dart';

/// Flutter code sample for [PaginatedDataTable].

class MyDataSource extends DataTableSource {
  @override
  int get rowCount => 3;

  @override
  DataRow? getRow(int index) {
    switch (index) {
      case 0:
        return const DataRow(
          cells: <DataCell>[
            DataCell(Text('Sarah')),
            DataCell(Text('19')),
            DataCell(Text(
                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')),
          ],
        );
      case 1:
        return const DataRow(
          cells: <DataCell>[
            DataCell(Text('Janine')),
            DataCell(Text('43')),
            DataCell(Text('Professor')),
          ],
        );
      case 2:
        return const DataRow(
          cells: <DataCell>[
            DataCell(Text('William')),
            DataCell(Text('27')),
            DataCell(Text('Associate Professor')),
          ],
        );
      default:
        return null;
    }
  }

  @override
  bool get isRowCountApproximate => false;

  @override
  int get selectedRowCount => 0;
}

final DataTableSource dataSource = MyDataSource();

void main() => runApp(const DataTableExampleApp());

class DataTableExampleApp extends StatelessWidget {
  const DataTableExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SingleChildScrollView(
        padding: EdgeInsets.all(12.0),
        child: DataTableExample(),
      ),
    );
  }
}

class DataTableExample extends StatelessWidget {
  const DataTableExample({super.key});

  @override
  Widget build(BuildContext context) {
    return PaginatedDataTable(
      columns: const <DataColumn>[
        DataColumn(
          label: Text('Name'),
        ),
        DataColumn(
          label: Text('나이'),
        ),
        DataColumn(
          label: Text('Role'),
        ),
      ],
      source: dataSource,
    );
  }
}

```

</details>


### Screenshots or Video

<details open>
<summary>Screenshots / Video demonstration</summary>

<img width="720" alt="스크린샷 2024-05-24 오전 10 16 39" src="https://github.com/flutter/flutter/assets/1959945/56a66cde-dca9-45f8-b2ed-8a004d51d7fd">
<img width="707" alt="스크린샷 2024-05-24 오전 10 17 00" src="https://github.com/flutter/flutter/assets/1959945/2a490741-2268-4af2-b26f-473799bff13a">
<img width="707" alt="스크린샷 2024-05-24 오전 10 20 55" src="https://github.com/flutter/flutter/assets/1959945/10eb4fbd-9697-4701-b51a-f3b707900ec7">

</details>



### Logs

<details open><summary>Logs</summary>

```console
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 9.7 pixels on the right.

The relevant error-causing widget was:
  PaginatedDataTable
  PaginatedDataTable:file:///Users/kunsukim/workspace/collector-admin/lib/main.dart:72:12

To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9100/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A55860%2Fz7XHytwuSWg%3D&inspectorRef=inspector-0

The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#c0c97 relayoutBoundary=up1 OVERFLOWING:
  creator: Row ← DefaultTextStyle ← AnimatedDefaultTextStyle ← Align ← Padding ← ConstrainedBox ←
    Container ← Listener ← RawGestureDetector ← GestureDetector ← Semantics ← DefaultSelectionStyle ←
    ⋯
  parentData: offset=Offset(0.0, 18.0) (can use size)
  constraints: BoxConstraints(0.0<=w<=16.2, 0.0<=h<=56.0)
  size: Size(16.2, 20.0)
  direction: horizontal
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  textDirection: ltr
  verticalDirection: down

```

</details>


### Flutter Doctor output

<details open><summary>Doctor output</summary>

```console
[✓] Flutter (Channel stable, 3.22.1, on macOS 13.3 22E252 darwin-arm64, locale ko-KR)
    • Flutter version 3.22.1 on channel stable at /Users/kunsukim/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision a14f74ff3a (33 hours ago), 2024-05-22 11:08:21 -0500
    • Engine revision 55eae6864b
    • Dart version 3.4.1
    • DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/kunsukim/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    ! Flutter recommends a minimum Xcode version of 15.
      Download the latest version or update via the Mac App Store.
    ! CocoaPods 1.12.1 out of date (1.13.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to
        your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#updating-cocoapods for
      instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)

[✓] VS Code (version 1.87.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.84.0

[✓] Connected device (4 available)
    • iPhone 14 Pro Max (mobile)      • 532B6A58-E623-486F-9AC9-429A856A611A • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)                 • macos                                • darwin-arm64   • macOS
      13.3 22E252 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                • darwin         • macOS
      13.3 22E252 darwin-arm64
    • Chrome (web)                    • chrome                               • web-javascript • Google
      Chrome 125.0.6422.77

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
```

</details>