How can I apply max-width to a text div, but have the div expand only as much as it has to?

Question

If you apply a max-width and display:inline-block; to a div with text in it, the div will expand only as wide as the text is, until the text is so wide that a new line has to be started. Past this point, the div will take the maximum width allowed, regardless of how wide the widest line of text actually is.

My point is illustrated in this fiddle:

https://jsfiddle.net/nx570uu6/

<div class="wrapper">
  <div class="item">
    words
  </div>
  <div class="item">
    wordswordswords wordswordswords wordswordswords 
  </div>
  <div class="item">
    words
  </div>
</div>

.wrapper {
  width:200px;
  height:400px;
  background:blue;
}

.item {
  max-width:90%;
  background:green;
  margin:5px 0;
  display:inline-block;
}

Is there a way to make the div only as wide as the widest line of text?

So instead of this:

|wordswordswords            |
|wordswordswordswords       |
|wordswords                 |

The div would look like this:

|wordswordswords     |
|wordswordswordswords|
|wordswords          |

score 1 · Answer 1 · edited May 23 '17 at 11:45

Flexbox can do equal height columns and, as requested here, equal width rows. Try this:

 body {
      display: flex;            /* make .wrapper only as wide as longest content */
 }

.wrapper {
     display: flex;             
     flex-direction: column;    /* stack flex items vertically */
     /* width: 200px; */
     height: 400px;
     /* background: blue; */
}

.item {
    /* max-width: 90%; */
    background: chartreuse;     /* adjusted color; easier to see text */
    margin: 5px 0;
    /* display: inline-block; */
}

NOTES:

Now all .item divs will be equal width.The longest div sets the width for all.
In order for this method to work, you'll need to remove all specified widths, as they override the flex align-items: stretch rule, which creates the equal width rows.
If you want the rows to be a maximum width of 90% of the parent, instead of max-width: 90% on the child, try padding-right: 10% on the parent.

DEMO

Maybe I did something wrong, but it didn't work for me: https://jsfiddle.net/nx570uu6/3/ — Joe Morano, Feb 21 '16 at 01:31

score 0 · Answer 2 · answered Feb 21 '16 at 01:31

0

Go for display: flex; in your wrapper class as it will ensure that they are all the same width.

.wrapper {
    display: flex;
    flex-direction: column;
}

answered Feb 21 '16 at 01:31

Chris Rutherfurd

1,617
1
15
32

Maybe I did something wrong, but that doesn't work for me: https://jsfiddle.net/nx570uu6/3/ – Joe Morano Feb 21 '16 at 01:32

score 0 · Answer 3 · answered Feb 21 '16 at 01:41

The algorithm to size inline-blocks is called shrink-to-fit or fit-content:

min(max-content, max(min-content, fill-available))

where the max-content is the preferred size without breaking lines other than where explicit line breaks occur, and the min-content is breaking lines in all soft wrap opportunities.

Then, when min-content < fill-available < max-content, the shrink-to-fit width is fill-available. Instead, you want it to be the maximum width of the contents in each line box.

AFAIK, there is no way to achieve this. The reasoning might be that a small tiny change could rearrange the items into different lines, and produce a big abrupt change in the width of the container. This is probably undesirable. It could also produce circular definitions, e.g. in case the width of the children is in percentages.

score 0 · Answer 4 · answered Feb 21 '16 at 01:41

0

Why not simply width:min-content ?

.wrapper {
  width:200px;
  background:gold;
}

.item {
  width:min-content;
  background:green;
  margin:5px 0;
  display:block;
  color:white;
}

<div class="wrapper">
  <div class="item">
    words
  </div>
  <div class="item">
    wordswordswords word wordswordswordswords 
  </div>
  <div class="item">
    words
  </div>
</div>

answered Feb 21 '16 at 01:41

c-smile

26,734
7
59
86

Is it possible to prevent the div from growing to a width more than 90% of its parent? – Joe Morano Feb 21 '16 at 01:47

score 0 · Answer 5 · answered Feb 21 '16 at 01:57

you may use the display:table or display:inline-table; propertie. shrinks/expands to fit to inside content.

.wrapper {
  display: table;
}
.item {
  /*max-width:90%; here ?  it breaks ! */
  background: green;
  margin: 5px 0;
  display: block;
  color: white;
}

<div class="wrapper">
  <div class="item">
    words
  </div>
  <div class="item">
    wordswordswords word wordswordswordswords
  </div>
  <div class="item">
    words
  </div>
</div>
<div class="wrapper">
  <div class="item">
    words
  </div>
  <div class="item">
    wordswordswords word
  </div>
  <div class="item">
    words
  </div>
</div>
<div class="wrapper">
  <div class="item">
    words
  </div>
  <div class="item">
    wordswordswords
  </div>
  <div class="item">
    words
  </div>
</div>

How can I apply max-width to a text div, but have the div expand only as much as it has to?

5 Answers5