Member Avatar for shadowcrawler

Hi there,
is there any way to adjust the width of outer div automatically?
e.g.

<div class="outer"><div class="inner">test</div></div>

What I want is that the width of outer could be set automatically according to the content of inner so that I do not have to set the value by myself.

  • 4 Contributors
  • 9 Replies
  • 2K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Dandello

Dani AI

Generated

You can make the outer box hug whatever is inside by turning it into a shrink-to-fit box. By default a block-level element expands to the full width of its containing block, so it will not size itself to its child automatically as-is (that is what you are seeing, and is correct). Also, overflow: hidden does not change an element’s width; it creates a new block formatting context mainly used to contain floats, so ’s trick will not shrink the outer box. (developer.mozilla.org)

Two reliable approaches:

  • Keep it block-level, but let it size to content with the modern keyword:
.outer { width: fit-content; max-width: 100%; }

This keeps layout simple and prevents overflow on small viewports with max-width. (developer.mozilla.org)

  • Or make the container participate inline and use the spec’s shrink-to-fit behavior:
.outer { display: inline-block; }    /* or: .outer { float: left; } */

Inline-blocks (and floats) with width:auto use shrink-to-fit width, so the parent will wrap tightly around the inner content. If you float it, remember to clear it or wrap it in a containing block. (w3c.github.io)

Practical edge cases:

  • Long, unbreakable strings (like long URLs) can force the box wider than you expect. Allow breaks to avoid this:
.outer { overflow-wrap: anywhere; }

This lets the outer still hug the content without overflow. (developer.mozilla.org)

Finally, make sure the page is in standards (no-quirks) mode with a modern doctype; quirks can change sizing behavior in subtle ways:

<!doctype html>

Place it at the very top of the document. (developer.mozilla.org)

, note that adding a large min-width will prevent shrink-wrapping and can recreate the empty area the OP saw.

Recommended Answers

All 9 Replies

Member Avatar for Dandello

Basically, all divs want to be 100% the width of their container unless given a smaller width. So to answer your question, no. But the width of the contents inside the inner div will also have no effect on the width of that div - they will simply run outside the container.

Member Avatar for shadowcrawler

Basically, all divs want to be 100% the width of their container unless given a smaller width. So to answer your question, no. But the width of the contents inside the inner div will also have no effect on the width of that div - they will simply run outside the container.

OK, I see. Thanks.

Member Avatar for lps

Basically, just assign CSS 'overflow:hidden' to the outer div. With this, the outer div will auto size in tern of width and height based on content of inner div without have to set fixed width.

Member Avatar for shadowcrawler

Basically, just assign CSS 'overflow:hidden' to the outer div. With this, the outer div will auto size in tern of width and height based on content of inner div without have to set fixed width.

It does not work. There is still an empty area shown....

Member Avatar for lps

Are you including the doctype before html?

Member Avatar for shibin vadayatt

create the div class with "width:auto;"... this will help you
example:
Html:
<div class="outer">.........Document........</div>
css class for div:
outer{
min-width:1024px;
width:auto;
height:auto;
}

Member Avatar for Dandello

Ah, something I hadn't experimented with. Nice new trick.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.