Why does my widget get squished when the keyboard appears?

The chatScreen holds the receivedChats (top) and the msgInput (bottom) widgets. For some reason, the words "Write message..." go outside of their text input widget and I'm not sure why.

chatScreen:

@override
  Widget build(BuildContext context) {
    final groupIDPath = 'groupChats/path'; 
    return Scaffold(
      appBar: AppBar(
        title: Text('Group Chat Screen'),
        backgroundColor: Color.fromRGBO(102, 204, 125, 1.0),
        elevation: 0.0,
      ),
      body: Column( 
        children: [
          Expanded(
            flex: 8,
            child: Row(
              children: [
                Expanded(
                  child: ReceivedChats(groupIDPath: groupIDPath),
                ),
              ],
            ),
          ),
          Expanded(
            flex: 2,
            child: Row(
              children: [
                Expanded(
                  child: MsgInput(groupIDPath: groupIDPath),
                )
              ],
            ),
          )
        ],
      )
    );
  }

receivedChats:

@override
  Widget build(BuildContext context) {
    final messageDao = MessageDao(groupIDPath: widget.groupIDPath);
    var msg;
    return Scaffold(
      body: Container(
        child: ListView.builder(
          itemCount: data?.length ?? 0,
          itemBuilder: (context, index) {
            data?.forEach((key, value) {
              msg = Message.fromJson(value);
              dataList?.add(msg);
            });
            if (dataList?[index] == null) { 
              return Text('');
            } else {
              return messageDao.messageWidget(dataList?[index].type, dataList?[index].uid, dataList?[index].text);
            }
          }
        ),
      )
    );
  }

msgInput:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            flex: 3,
            child: Row(
              children: [
                Expanded(
                    child: Container(color: Colors.blue,)
                ),
              ],
            ),
          ),
          Expanded(
            flex: 1,
            child: Row(
              children: [
                Expanded(
                  flex: 10,
                    child: TextField(
                        controller: messageController,
                        decoration: InputDecoration(
                          hintText: "Write message...",
                        )
                    )
                ),
                Expanded(
                  flex: 3,
                    child: Container(color: Colors.green,)
                )
              ],
            ),
          ),
        ],
      ),
    );
  }