[BUG] Audio player bottom overflowed

[wb14123]

Describe the bug: The audio player bottom is overflowed so the control buttons cannot be clicked. As shown in the screenshot below.

HTML to reproduce the issue:

<p>
  <audio controls>
    <source src="https://play.podtrac.com/npr-510338/edge1.pod.npr.org/anon.npr-mp3/npr/lifekit/2021/12/20211227_lifekit_life_kit_-_dry_january__-_rebroadcast_122721_-_final.mp3?awCollectionId=510338&awEpisodeId=1066952211&orgId=1&d=1445&p=510338&story=1066952211&t=podcast&e=1066952211&size=23123636&ft=pod&f=510338" type="audio/mpeg">
  </audio>
</p>
Thinking about taking a break from drinking? Here are ways to help you make a plan, navigate tricky social situations and reassess your relationship with alcohol so you can experience the benefits of dry January. (This episode originally aired in January 2020.)

Html widget configuration:

No custom configuration.

Expected behavior:

Audio player rendered properly.

Screenshots:

Device details and Flutter/Dart/flutter_html versions: Chrome web page with flutter_html 2.2.1

Stacktrace/Logcat

The specific RenderFlex in question is: RenderFlex#8990c relayoutBoundary=up1            
OVERFLOWING:                                                                             
  needs compositing                                                                      
  creator: Column ← CupertinoControls ← Stack ← SizedBox ← Center ← PlayerWithControls ←
    _ChewieAudioControllerProvider ← ChewieAudio ← ConstrainedBox ← Container ← Semantics
    ← RichText ←                                                                         
    ⋯                                                                                    
  parentData: not positioned; offset=Offset(0.0, 0.0) (can use size)
  constraints: BoxConstraints(0.0<=w<=300.0, 0.0<=h<=75.0)                         
  size: Size(300.0, 75.0)                                                                
  direction: vertical                                                                    
  mainAxisAlignment: start                                                               
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down

Additional info:

Flutter is run with --web-renderer html

[tneotia]

This is actually a bug with a dependency we use, chewie_audio.

[wb14123]

Thanks for taking a look. Is there any link for the issue of chewie_audio that I can check?

[erickok]

Since I also maintain chewie_audio, could you create a ticket there?

[Sub6Resources]

Closing, since this issue is in chewie_audio, and that package has been updated in 3.0.0-beta.1