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


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

  • 0
    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)
  • 0

    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 | |

  • 0
    if your only concerned about that part scrolling you can get rid of the default scroll bar by setting that element to no overflow.

    There's also a css property that simply hides the scroll bar but I don't think it's fully supported on all browsers.

    The only other way I can remember to do it is something like your doing where you set the width to force it out of view. i want to say it works even better if you wrap it in a container that has its overflow restricted.
  • 0
    @mr-user your ASCII drawing didn't work, but I think I understand. Take a look at this: https://jsfiddle.net/rc0fwxjt/
  • 1

    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.
Add Comment