Failed to render a html which contains table with height: 100% - BoxConstraints forces an infinite height.

[luongnv89]

Steps to Reproduce

The html content

<table style="height: 100%">
        <tbody>
          <tr>
            <td>
              <p>Table 1</p>
            </td>
          </tr>
        </tbody>
      </table>

The widget configuration

There is no special configuration. This is the whole page:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    const String html = '''
    <table style="height: 100%">
        <tbody>
          <tr>
            <td>
              <p>Table 1</p>
            </td>
          </tr>
        </tbody>
      </table>
    ''';
    return Scaffold(
      appBar: AppBar(
        title: const Text('MVE'),
      ),
      body: const SingleChildScrollView(
        child: HtmlWidget(html),
      ),
    );
  }
}

The Testing environment

• flutter_widget_from_html_core: ^0.8.5+1
• Test on Android phone & Android Simulator (API 30)

There is no issues found for flutter doctor -v

Expected results

• Cannot see the html content on the screen. Error log detail is in actual results section
• If we remove height: 100%, then we will see Table 1 on the screen

Actual results

════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.

These invalid constraints were provided to _TableRenderObject's layout() function by the following function, which probably computed the invalid constraints in question:
_RenderCssSizing.performLayout
package:flutter_widget_from_html_core/…/widgets/css_sizing.dart:203

The offending constraints were: BoxConstraints(0.0<=w<=376.5, h=Infinity)
The relevant error-causing widget was
HtmlWidget
lib/main.dart:130
When the exception was thrown, this was the stack
#68     RenderObject.layout
package:flutter/…/rendering/object.dart:1887
#69     RenderProxyBoxMixin.performLayout
package:flutter/…/rendering/proxy_box.dart:116
#70     RenderObject.layout
package:flutter/…/rendering/object.dart:1887
#71     RenderProxyBoxMixin.performLayout
package:flutter/…/rendering/proxy_box.dart:116
#72     RenderObject.layout
package:flutter/…/rendering/object.dart:1887
#73     RenderProxyBoxMixin.performLayout
package:flutter/…/rendering/proxy_box.dart:116
#74     RenderObject.layout
package:flutter/…/rendering/object.dart:1887
#75     RenderProxyBoxMixin.performLayout
package:flutter/…/rendering/proxy_box.dart:116
#76     RenderObject.layout
package:flutter/…/rendering/object.dart:1887
#77     RenderView.performLayout
package:flutter/…/rendering/view.dart:165
#78     RenderObject._layoutWithoutResize
package:flutter/…/rendering/object.dart:1731
#79     PipelineOwner.flushLayout
package:flutter/…/rendering/object.dart:887
#80     RendererBinding.drawFrame
package:flutter/…/rendering/binding.dart:497
#81     WidgetsBinding.drawFrame
package:flutter/…/widgets/binding.dart:883
#82     RendererBinding._handlePersistentFrameCallback
package:flutter/…/rendering/binding.dart:363
#83     SchedulerBinding._invokeFrameCallback
package:flutter/…/scheduler/binding.dart:1144
#84     SchedulerBinding.handleDrawFrame
package:flutter/…/scheduler/binding.dart:1081
#85     SchedulerBinding.scheduleWarmUpFrame.<anonymous closure>
package:flutter/…/scheduler/binding.dart:862
(                size: MISSING
                padding: EdgeInsets.all(1.0)
                textDirection: ltr
                child: RenderFlex#01197 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
                    parentData: offset=Offset(0.0, 0.0)
                    constraints: MISSING
                    size: MISSING
                    direction: vertical
                    mainAxisAlignment: start
                    mainAxisSize: min
                    crossAxisAlignment: start
                    textDirection: ltr
                    verticalDirection: down
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: _RenderCssSizing#2ddaf relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
package:flutter/…/rendering/box.dart:1
Failed assertion: line 1982 pos 12: 'hasSize'

The relevant error-causing widget was
SingleChildScrollView
lib/main.dart:129
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: _RenderCssSizing#2ddaf relayoutBoundary=up11 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
package:flutter/…/rendering/box.dart:1
Failed assertion: line 1982 pos 12: 'hasSize'

The relevant error-causing widget was
SingleChildScrollView
lib/main.dart:129
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by scheduler library ═════════════════════════════════
Updated layout information required for _TableRenderObject#f430b NEEDS-LAYOUT NEEDS-PAINT to calculate semantics.
'package:flutter/src/rendering/object.dart':
package:flutter/…/rendering/object.dart:1
Failed assertion: line 2789 pos 12: '!_needsLayout'

════════════════════════════════════════════════════════════════════════════════
Reloaded 1 of 995 libraries in 4,751ms.
D/Surface ( 2370): Surface::disconnect(this=0x8ff6a800,api=1)
D/Surface ( 2370): Surface::disconnect(this=0x8ff6a800,api=-1)
D/Surface ( 2370): Surface::disconnect(this=0x8ff0b800,api=1)
V/PhoneWindow( 2370): DecorView setVisiblity: visibility = 4, Parent = ViewRoot{364f38f 

Temporary solution

• Remove all height: 100% values from html content

[chiragabhani]

Same issue

[daohoangson]

A new version has been released with the fix for this. Please try upgrading the core package and see whether it works for you (e.g. flutter pub upgrade flutter_widget_from_html_core).