Width:max-content causes item to span out of a wrapper or overflowing from it, how to prevent that?

This is not a question about a particular HTML-CSS codepiece but a principal question.

If an item-element with width:max-content spans out of a wrapper or overflowing from a wrapper-element, how would you prevent that?

In one case I have tried to give such item-element the following CSS altogether but it didn’t help. it kept spanning out or overflowing.

word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;
overflow: hidden;

The item element very very much needs width: max-content so giving up on it and finding another method altogether to organize the wrapper and its item would be a bit painful.

You could simply add max-width:100%.

e.g.

.wrap{
  width:max-content;
  border:1px solid red;
  max-width:100%;
}

Though I would hazard a guess that you are using max-content when another shrink to fit method may be more suitable. I very rarely have to use max-content and can’t actually remember the last time I needed it.

width: max-content helped me several times when I have customized a complex CMS or framework like Drupal which has a very complex yet very efficient “out of box” CSS.

What I did in the last usecase when width: max-content caused overflow was to just shorten the link text from about 9 words to 2 words:
Instead of Read more articles on the topic of ecommerce here
to just
Read more
but such shortening is not always ideal, I’d say.

Yes probably the wrong approach as I mentioned. :slight_smile:

So what do you want to happen to the words?

With the code I gave you they would wrap to 2 lines when needed which seems to be exactly what you were trying to do with your break:word css styles.

If you want just the one single line and an ellipses to pop in at the end then you could do this instead.

.wrap {
  width: max-content;
  border: 1px solid red;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

I have tried to change the text back from something like:
Read more
to something like:
Read more articles on the topic of ecommerce here

The problem came back, of course.

Then, I have added:

max-width: 100% !important;
word-wrap: break-word !important;
white-space: pre-wrap !important;
word-break: break-word !important;
overflow: hidden !important;
text-overflow: ellipsis !important;

But, it didn’t solve my problem.

So I have tried to change it all just to

width: 100% !important

But this also didn’t solve my problem.

For now, it seems, I am “stuck” with the need to just shorten the text.

Strange.

Now you are just throwing the wrong styles at this so we need to see the context.

I have given you the code you need in my example. If it doesn’t work for you then you are missing something along the way. You may have other elements and other things that may need to be considered.

What you are asking is straight forward but we do need the context :slight_smile:

If you can give me a link then I will take a look (if you want it private then Pm me and I will take a look privately).

Just out now but back in a couple of hours. :wink:

1 Like

Thanks dear @PaulOB

width: 100% doesn’t cause the problem while width: max-content does, based on various tests of long textContent values of ~~ 60 characters that I have done.

But, using width: 100% “stretches” other buttons with the same class to cover hughly-broad wrappers, so I still don’t have a better approach than width: max-content to make all related buttons pixel-perfect (but overflowing if the text is too long).
Gladly the texts of all buttons with that class don’t go beyond 10 characters now so they all show fine in mobile devices.

No you don’t want width:100% you want max-width:100%.

max-content makes the element as wide as its content. It’s the max-width:100% that stops the element from overflowing the container and will allow it to wrap or to be hidden.

It’s a simple two step process.

More examples of both actions.

If its not working for you then you are doing it wrong as it will work as long as you define it correctly. I can guarantee that it could be fixed it in a couple of seconds if we could see the code you are using. :slight_smile:

You are probably just missing a key rule somewhere or it is being over-ridden or you are applying to the wrong element Sometimes it’s the child element that needs part of the code as well. Look at my examples.

1 Like

But I did give max-width: 100%.

Parent element

p > a.custom_button {
	max-width: 100% !important;
	word-wrap: break-word !important;
	white-space: pre-wrap !important;
	word-break: break-word !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;	
}

Child element

.custom_button {
	width: max-content !important;
	max-width: 100% !important;
	word-wrap: break-word !important;
	white-space: pre-wrap !important;
	word-break: break-word !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

The vast usage of important! there is to prevent clashes with Drupal’s CSS directives.

If you think any more data is needed I will gladly send a private message.

If you want to know why its not working for you then PM me a link and I’ll see what’s what. :wink: It may help if you encounter a similar issue in the future.

I always made a point of understanding why something didn’t work when I was learning so that I knew next time what to do. I very rarely resorted to !important either although I understand in frameworks it can be hard not to as you have to have overlong selectors (another bad mark against frameworks unfortunately).

I’m guessing that drupal has some rules for that element that you are missing to over-ride. I believe buttons are display:inline-block in drupal which means that they will be content width anyway just like width:max-content. However if you have them as inline elements then width does not apply and most of those rules you showed will have no meaning as they don’t apply to inline elements.

1 Like

From a private discussion, I understand that what I had to do was to ensure that the container element will break words inside it (as in the item element) to a lengthening passage if and when they touch the border, instead of not breaking them and letting them overflow on top of the border.

Therefore, this solved the problem:

* > .custom_button {
	word-break: break-word;
}

@PaulOB does that makes sense?

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.