0

I have some text inside a div. The parent of the div that holds the text has a specific width and display: flex;
I want the width of the container that holds the text to be as wide as its longest textline (in the fiddle this would be the line "WordyWords in").

I know this can be done by: display: inline, but this only works, when the parent does not have display: flex anymore.

.width{
width: 150px;
display: flex;
}

.text{
 font-size: 20px;
line-height: 20px;
display: inline;
background-color: red;
}

.width2{
width: 150px;
}

.text2{
 font-size: 20px;
line-height: 20px;
display: inline;
background-color: red;
}
This is what I have 

<div class="width">
<div class="text">Veryvery long WordyWords in here</div>
</div>



<br>


 This is kind of what I want, but I want to keep the <span style="background-color: #f2f2f2">display: flex;</span> attribute in the parent
<div class="width2">
<div class="text2">Veryvery long WordyWords in here</div>
</div>

enter image description here

Like shown in the picture, I would like the div .text to end right after the letter of the longest textline like display: inline does this. (The red line is where the .text div should end.) But I want to keep display: flex property on my parent. Is this even possible with flex set on the parent?

DigitalJedi
  • 1,577
  • 1
  • 10
  • 29
  • No...it's not - – Paulie_D Jun 06 '19 at 12:34
  • I think my picutre was misleading a bit, I removed It. – DigitalJedi Jun 06 '19 at 12:44
  • I don't seem to understand why `display: inline` is just working fine. Its exactly what I want, but apparently setting `display: flex`on the parent breaks this. Why is that? – DigitalJedi Jun 06 '19 at 12:45
  • This is the normal behaviour. Read this answer and you will understand https://stackoverflow.com/a/12377883/7982963. – Moaaz Bhnas Jun 06 '19 at 12:52
  • @Paulie_D Sooooo.... I found a "solution" to this problem. (needs some adjustment depending on personal application). But solving my question WAS possible ;) Would you mind unflag my question, so I can answer it myself, or would it be better to answer on the questions you suggested me? – DigitalJedi Jun 08 '19 at 09:16

0 Answers0