Today I fought against a monster named as CSS and I sort of won.

I am having a problem in that the grid layout don't work with the scroll bar (overflow)

After hours of trying thing out I remember that I am just creating the prove of concept that the system can actually be build.

I said "Hey this is just a prototype, it doesn't need to be pixel perfect, and finally use height in css".

I really appreciate it if anyone can advise me on less dirty method. Here is the source code

https://jsfiddle.net/rc0f9t5j/

The input box should stay at the button no matter how much text the container have. The fiddle have the intended behavior.

set the input's row to a fixed height and make .scroll-bar fill https://jsfiddle.net/952cy3v4/

(I'm by no means a CSS expert, so this might not be the best way but it's certainly better than what you did there XD)

@neeno

Your css look nicer but it doesn't get the effect I wanted.Maybe I explain it incorrectly.

I am trying to make the "grid-container" fixed size and when there is a multiple item in "conversation-text" , I want it to scroll. You can look at my code for example.

Essentially there two scroll bar , one for the browser and one for the "conversation-text" (if the multiple item cannot be display)

I don't know if the ASCII diagram below will show up correctly in your device but "|" represent the scroll bar.

Btw thank for helping.

======================== | |

conversation-text | | | |

| | | |

| | | |

========================| |

text field | |

========================

@mr-user your ASCII drawing didn't work, but I think I understand. Take a look at this: https://jsfiddle.net/rc0fwxjt/

@neeno

Thank you. Its work in fiddle but not in my browser.

It's not your fault since I don't give you a complete example and I simplify it too much.