How to make div container with flex use only one column-CodePudding

i need to refactor GetStream chat in react. My propblem that it has enough space but messages use only half of all avaliable space. When i started to look in layout in browser i noticed that div container is devided into sides, i suspect this is the reason of my problem.

I need to have only one big column instead of two or even if second column will be able to take as much space as it needs, but have no idea how to do it in Flex.

Sorry if question is very dummy i still new to flex

CodePudding user response：

Have you selected (?):

width: 100%;
display: flex;
flex-direction: column;
align-content: flex-start;

justify-content will not work in the direction "left" or "right" at column, this will just change "top" and "bottom" (or center). You need align-content for example.

CodePudding user response：

You should try doing this.

width: (your own value)
display: flex
flex-direction: column
justify-content: flex-start or center ( Depending on your preference )

Make sure you are not settings different styles for the same div multiple times