The design I'm working has an chip element with very long words. (French)The chip is part of a flex row element and may not be longer than 250px.If the content is shorter than 250px, it should shrink.
This seemed very simple, by using flex: 0 250px; on the child element, but that's when we started to note some strange behaviour: The element didn't shrink to the expected size, but kept the full width of 250px and got additional white space on the right side of the text. Word breaks are not allowed.
I've made a small example of the exact issue I'm facing.
#container { display: flex; flex-direction: row;}#child { background-color: red; flex: 0 250px;}<div id="container"><p id="child"> looooooooong looooooooong looooooooong looooooooong looooooooong</p></div>Does anyone know how it can be achieved that the width of the p tag matches the actual width of the content of the p tag? (so no whitespace on the right?)