I’m trying to align a top menu which consists of 3 blocks of content.

I am a recent front-end developer, I am working on a chat page that will be seen in browsers and on mobile devices. The page has an issue related to the on-screen keyboard appearing when a user wants to write a message. When the keyboard appears, the header is raised and the text box is above the keyboard, the problem is that the header should remain up while the text box is positioned above the keyboard, additionally if I scroll the header appears but the box getting behind the keyboard. I need a solution to automatically adjust the content using only CSS, so that all elements are always visible, the header as well as the text box.

I created .container flex container that includes 2 flex items:

I have a div where I want to apply justify-content: space-between but have the first 2 or last 2 (or whatever combination I need) of items “stick together”.

I’m learning flexbox and trying to figure out how to do this layout but cannot figure it out.

I’m trying to build out something with flex that has a layout like this…

In the example below the “viewer” element grows up over the page height

I’m trying to add linebreak to wrappable flex row items.
It basicaly work, but i have a gap i don’t understand.

I’m trying to make my site responsive and when the font size is 12 everything is fine. But when I set the font size to 13 my text is getting wrap due to the lack of space. I’m ok with the text wrapping but for some reason my div is taking up extra space than necessary and the border on the right is looking awkward.
Image 1
Image 2

I’m learning CSS flexbox. I have created the mockup shown below. The green box is a flexbox item in a flexbox row layout. I have troubles understanding why that green box does not fill the space all the way to the right of the browser window.