How to remove extra space caused by word-wrap in shrunk to fit element?

Question

I am trying to use shrink to fit on #container. It works perfectly until the elements it contains wrap. This causes it to expand to 180px.

#screen-dimensions 
{
  width: 250px;
  height: 100px;
  background-color: yellow;
}

#container
{
  display: table;
  background-color: pink;
  border: 5px solid red;
}

#container > div
{
  display: inline-block;
  width: 160px;
  background-color: lightblue;
  border: 5px solid blue;
}

<div id="screen-dimensions">
  <div id="container">
    <div>content</div>
    <div>content</div>
  </div>
</div>

I understand why this behavior occurs but I haven't been able to find any workarounds.

Can this be fixed?

Why do you use `display:table;` on `#container` but not `table-cell` on `#container > div`? Tables are still block-elements, which always stretch to the width available (in this case 180px) – make it `inline-block` also… See also: http://reference.sitepoint.com/css/display — feeela, Aug 18 '11 at 16:34
Tables behave unlike other block and shrink to fit their content. However I have modified my question so that the behavior is clearer. — Timesquare, Aug 18 '11 at 17:26
"the behavior is clearer" not really, as the `float: left;` doesn't change anything and I still did not know what the desired result should look like. http://jsfiddle.net/feeela/Anc3v/ — feeela, Aug 18 '11 at 17:30
I hope this had made it clearer. I don't want the red container to be visible, I need it to shrink to fit the contained DIVs. — Timesquare, Aug 18 '11 at 17:44
[This question](https://stackoverflow.com/questions/12377826/css-width-max-width-on-line-wrap) might help. — mfluehr, Dec 21 '22 at 19:53

score 0 · Answer 1 · edited Jul 24 '19 at 05:59

0

Try using:

{
  display: inline-flex;
}

edited Jul 24 '19 at 05:59

jkdev

11,360
15
54
77

answered Jul 23 '19 at 17:50

SirGoose

131
1
2
7

This doesn't seem to work: https://jsfiddle.net/so9nk5pc/ The goal is for `#container` to shrink-to-fit around its contents, so that the red region is no longer visible. – Timesquare Aug 22 '19 at 14:16

score -1 · Answer 2 · answered Aug 18 '11 at 17:52

-1

I achieved that by playing around with the display properties:

#container
{
    display: inline-block;
}
#container > div
{
    display: block;
}

See: http://jsfiddle.net/feeela/Anc3v/

answered Aug 18 '11 at 17:52

feeela

29,399
7
59
71

Unfortunately, this does not dynamically resize itself as the screen dimensions change. – Timesquare Aug 18 '11 at 17:56

How to remove extra space caused by word-wrap in shrunk to fit element?

2 Answers2

Linked