example/example.md

Example #

flutter_html 3.0.0 parses none of overflow, overflow-x and overflow-y. It drops all three, and there is no error and no warning, so a tall child renders over whatever sits below it. This extension wraps the built element in a ClipRect.

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html_css_overflow/flutter_html_css_overflow.dart';

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '''
              <div style="height: 60px; overflow: hidden;
                          background-color: #e9ecef; padding: 8px; margin: 8px;">
                A teaser cut off at sixty logical pixels. Everything past the
                bottom edge of this box is clipped away.
              </div>

              <p style="margin: 8px;">
                This paragraph stays legible, which is the point.
              </p>
            ''',
            extensions: const [CssOverflowHtmlExtension()],
          ),
        ),
      );
}

void main() => runApp(const ExampleApp());

The height bounds the box. A box with no height grows to fit its content, so nothing overflows it and the clip renders nothing.

Clipping a wide child #

A child wider than its parent overflows on its own. A horizontal clip therefore needs no bound of its own:

Html(
  data: '''
    <div style="width: 120px; overflow-x: hidden; background-color: #e9ecef;">
      <div style="width: 400px; height: 24px; background-color: #adb5bd;">
        Four hundred pixels wide.
      </div>
    </div>
  ''',
  extensions: const [CssOverflowHtmlExtension()],
);

overflow-x: hidden clips the horizontal axis only. CSS computes the vertical axis to auto in that pair. This extension does not scroll, so it leaves the vertical axis as it was.

The composition notes measure this extension next to each sibling that wraps the same element.