How to hide element overflow using CSS?

Question

I am trying to make the front end for a very simple chat box using javascript, css, and html.

I have a element overflow issue when user resizes the window, if the chat is greater than 12 messages, the messages overflow from the container.

I made a jsfiddle so you guys can try for yourself: https://jsfiddle.net/fb72uwwq/6/

In the fiddle, click the chat button and spam messages, resize your browser and you can see they overflow.

I tried some stack overflow answers but overflow: hidden; did not work. How can I solve this?

the simple answer is that you shouldn't be adding margins to the bottom to create the desired effect. If you can, consider looking into using flexbox instead (though it will not work on old browsers). Also, javascript does not use static types, so Number(Key) and key.toString() are not necessary. — daniel
– daniel, Commented Aug 13, 2017 at 0:15
Setting height to 100% should resolve the issue. c.style.height = "100%"; — amit wadhwani
– amit wadhwani, Commented Aug 13, 2017 at 0:23

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

css

#chat{
  height: 100% !important;
  overflow-y: hidden; 
   /* if you want to scroll on overflow, you can use overflow-y: scroll; or overflow-y: auto; */
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 13, 2017 at 0:36

Kamga Simo Junior

1,7212 gold badges18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

amit wadhwani · Accepted Answer · 2017-08-13 00:24:03Z

1

Setting height to 100% should resolve the issue.

c.style.height = "100%";

answered Aug 13, 2017 at 0:24

amit wadhwani

1,1201 gold badge7 silver badges12 bronze badges

Comments

Lazar Ljubenović · Accepted Answer · 2017-08-13 00:14:25Z

overflow: hidden will not work because you're not placing the messages inside the container at all. Instead, you're stacking them with absolute positioning and calculated bottom-margin as its sibling. With your current markup, there's no way to cut off the messages at top, unless you also want to calculate that by hand.

Also, your question is not very clear: do you want to stop adding messages once it's outside the container or you just want to crop them off the screen (but they'd still be visible in the DOM).

Either way, your current structure can be much improved if you create it the following way:

<div id=chat>
  <input type=text id=chat-message>
  <div class=message>First message</div>
  <div class=message>Second message</div>
  <div class=message>Third message</div>
</div>

This way, all you have to do to make them appear like you want it to use Flexbox:

#chat {
  display: flex;
  flex-direction: column-reverse; /* from bottom to top */
}

Your JavaScript will also be much simpler, since you'll just be creating a new element as the last child of #chat, meaning no additional calculations. (You can still remove the oldest messages after a certain amount of messages have appeared on the screen).

Collectives™ on Stack Overflow

How to hide element overflow using CSS?

3 Answers 3

css

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

css

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related