Bottom Overflowed in Chrome / Desktop Resolution in Flutter - flutter

Question

when i add container / listview in mobile resolution there is no bottom overflowed problem. (and the content can still be scrolled).enter image description here
however when i add container in chrome/desktop resolution
enter image description here
I've been looking for ways to solve this problem on the internet, such as adding
Expanded()
or
resizeToAvoidBottomPadding: false
and so on.
but still can't solve this problem.
here's my code:
`
import 'package:flutter/material.dart';
class MyDesktopBody extends StatelessWidget {
const MyDesktopBody({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black54,
appBar: AppBar(
title: const Text('D E S K T O P'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
// First Column
Expanded(
child: Column(
children: [
// Youtube Video
Padding(
padding: const EdgeInsets.all(8.0),
child: AspectRatio(
aspectRatio: 16 / 9,
child: Container(
height: 250,
color: Colors.redAccent,
),
),
),
// Comment Section & Recommended Videos
Expanded(
flex: 8,
child: ListView.builder(
shrinkWrap: true,
itemCount: 8,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.black54,
height: 120,
),
);
}),
)
],
),
),
// Second Column
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 200,
color: Colors.black54,
),
)
],
),
),
);
}
}
`

Answer 1

change the first Column into a Listview and remove the second Expanded and it should work properly
import 'package:flutter/material.dart';
class MyDesktopBody extends StatelessWidget {
const MyDesktopBody({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black54,
appBar: AppBar(
title: const Text('D E S K T O P'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
// First Column
Expanded(
child: ListView( //<---- here
children: [
// Youtube Video
Padding(
padding: const EdgeInsets.all(8.0),
child: AspectRatio(
aspectRatio: 16 / 9,
child: Container(
height: 20,
color: Colors.redAccent,
),
),
),
// Comment Section & Recommended Videos
ListView.builder( //<--here
shrinkWrap: true,
itemCount: 8,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.black54,
height: 120,
),
);
})
],
),
),
// Second Column
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 200,
color: Colors.black54,
),
)
],
),
),
);
}
}