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.
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.
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
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).
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.
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.
If you want to know why its not working for you then PM me a link and I’ll see what’s what. 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.
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.
