0

I want to have a div just as wide as the longest row of inline children. But I don't get to archive this - the div will get added some space to the right in most cases.

If you try out the following example, you will see the empty red space right of "Text 4". I would love to see no space and the end of the div.outer right after the last pixel of the "4".

<div style="max-width: 224px;">
  <div class="outer">
    <div>Text 1</div>
    <div>Text 2</div>
    <div>Text 3</div>
    <div>Text 4</div>
    <div>Text 5</div>
  </div>
</div>

.outer {
  display: inline-block;
  background: red;
}

.outer > div {
  display: inline-block;
}

I hope you can help me with this so easy looking challenge!

klischee
  • 45
  • 7
  • It's not clear to me what actually is the problem. Do you want the outer div to be as wide as the widest inner div? Also, this is what your code outputs- https://imgur.com/DLTyua2. – gjzim Aug 02 '19 at 12:49
  • I just want the div.outer to be as wide as it's content. In my example, when a div with text gets breaked, there will be empty space on the right side. Here's an graphical example what I mean: https://imgur.com/bNkTzR4 – klischee Aug 02 '19 at 14:06

2 Answers2

0

I think you need to call float:left to .outer > div to remove the space. Hope this help :)

sumeshsn1
  • 756
  • 5
  • 13
0

You could use width: fit-content; instead of using max-width: 224px;. I hope this help what you were asking for.

from: max-width: 224px

to: width: fit-content

Javier Pérez Batista
  • 310
  • 4
  • 14
  • Thank you, but this does not help. I've set the max-width just to simulate a browser width, so the text will have to break on some point. If I do it as you said and resize the browser size manually so the text will break, there still will be empty space in the right of "Text 4" as soon as "Text 5" breaks. – klischee Aug 02 '19 at 13:44