Como posso fazer uma div não maior que seu conteúdo?

Eu tenho um layout semelhante a:

<div>
    <table>
    </table>
</div>

Eu gostaria que a divexpansão fosse tão ampla quanto possível table.

A solução é definir o seu divpara display: inline-block.

Você deseja um elemento de bloco que possua o que o CSS chama de largura encolher para ajustar e a especificação não fornece uma maneira abençoada de obter uma coisa dessas. No CSS2, encolher para ajustar não é um objetivo, mas significa lidar com uma situação em que o navegador "precisa" obter uma largura do nada. Essas situações são:

• flutuador
• elemento absolutamente posicionado
• elemento de bloco embutido
• elemento da tabela

quando não há largura especificada. Ouvi dizer que eles pensam em adicionar o que você deseja no CSS3. Por enquanto, convide-se com uma das opções acima.

A decisão de não expor o recurso diretamente pode parecer estranha, mas há um bom motivo. É caro. Reduzir para ajustar significa formatar pelo menos duas vezes: você não pode começar a formatar um elemento até conhecer sua largura e não pode calcular a largura sem passar por todo o conteúdo. Além disso, não é necessário o elemento encolher para ajustar com a frequência que se pensa. Por que você precisa de div extra em torno da sua mesa? Talvez a legenda da tabela seja tudo que você precisa.

Eu acho que usando

display: inline-block;

funcionaria, no entanto, não tenho certeza sobre a compatibilidade do navegador.

Outra solução seria envolver o seu divem outro div(se você quiser manter o comportamento do bloco):

HTML:

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS:

.yourdiv
{
    display: inline;
}

display: inline-block adiciona uma margem extra ao seu elemento.

Eu recomendaria o seguinte:

#element {
    display: table; /* IE8+ and all other modern browsers */
}

Bônus: agora você também pode centralizar facilmente esse novo chique #elementapenas adicionando margin: 0 auto.

Você pode tentar fit-content(CSS3):

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}

• Suporte do navegador
• Especificação

O que funciona para mim é:

display: table;

no div. (Testado no Firefox e Google Chrome ).

Existem duas soluções melhores

1. display: inline-block;

   OU

2. display: table;

Destes dois display:table;é melhor, porque display: inline-block;adiciona uma margem extra.

Para display:inline-block;você poder usar o método de margem negativa para corrigir o espaço extra

display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack - Suporte entre navegadores para o estilo de bloco embutido (19/11/2007) .

Sem saber em que contexto isso vai aparecer, mas acredito que a propriedade de estilo CSS floatquer leftou rightvai ter esse efeito. Por outro lado, também terá outros efeitos colaterais, como permitir que o texto flutue ao redor dele.

Corrija-me se estiver errado, porém, não tenho 100% de certeza e, atualmente, não posso testá-lo.

A resposta para sua pergunta está no futuro, meu amigo ...

ou seja, "intrínseco" está chegando com a atualização CSS3 mais recente

width: intrinsic;

infelizmente, o IE está por trás disso, por isso ainda não o suporta

Saiba mais: Módulo de dimensionamento intrínseco e extrínseco CSS nível 3 e posso usar? : Dimensão intrínseca e extrínseca .

Por enquanto, você precisa estar satisfeito <span>ou <div>definido como

display: inline-block;

Uma solução compatível com CSS2 é usar:

.my-div
{
    min-width: 100px;
}

Você também pode fazer a flutuação da sua div, que a forçará o menor possível, mas será necessário usar um clearfix se algo dentro da sua div estiver flutuando:

.my-div
{
    float: left;
}

width:1px;
white-space: nowrap;

funciona bem para mim :)

OK, em muitos casos, você nem precisa fazer nada como por padrão o div heighte widthcomo automático, mas se não for o seu caso, a aplicação de inline-blockexibição funcionará para você ... veja o código que eu criei para você e faça o que você está procurando:

div {
  display: inline-block;
}

<div>
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
      <td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
    </tr>
  </table>
</div>

Isso foi mencionado nos comentários e é difícil de encontrar em uma das respostas:

Se você estiver usando display: flexpor qualquer motivo, poderá usar:

div {
    display: inline-flex;
}

Isso também é amplamente suportado nos navegadores.

Você pode fazer isso simplesmente usando display: inline;(ou white-space: nowrap;).

Espero que você ache isso útil.

Você pode usar inline-blockcomo @ user473598, mas cuidado com navegadores mais antigos ..

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

O Mozilla não suporta bloco inline, mas eles têm -moz-inline-stacko mesmo

Alguns navegadores em torno do inline-blockatributo de exibição: https://css-tricks.com/snippets/css/cross-browser-inline-block/

Você pode ver alguns testes com este atributo em: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Basta colocar um estilo no seu arquivo CSS

div { 
    width: fit-content; 
}

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <div id="content_lalala">
                this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
            </div>
        </td>
    </tr>
</table>

Eu sei que as pessoas às vezes não gostam de tabelas, mas tenho que dizer, tentei os hacks em linha do css, e eles meio que funcionavam em alguns divs, mas em outros não, então era realmente mais fácil incluir o div em expansão uma tabela ... e ... ela pode ter ou não a propriedade inline e ainda assim é a tabela que manterá a largura total do conteúdo. =)

Uma demonstração de trabalho está aqui-

.floating-box {
    display:-moz-inline-stack;
    display: inline-block;

    width: fit-content; 
    height: fit-content;

    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}

<h2>The Way is using inline-block</h2>

Supporting elements are also added in CSS.

<div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
</div>

Minha solução flexbox CSS3 em dois sabores: o da parte superior se comporta como uma extensão e o da parte inferior se comporta como uma div, ocupando toda a largura com a ajuda de um invólucro. Suas classes são "top", "bottom" e "bottomwrapper", respectivamente.

body {
    font-family: sans-serif;
}
.top {
    display: -webkit-inline-flex;
    display: inline-flex;
}
.top, .bottom {
    background-color: #3F3;
    border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
    display: -webkit-flex;
    display: flex;
}
table {
    border-collapse: collapse;
}
table, th, td {
    width: 280px;
    border: 1px solid #666;
}
th {
    background-color: #282;
    color: #FFF;
}
td {
    color: #444;
}
th, td {
    padding: 0 4px 0 4px;
}

Is this
<div class="top">
	<table>
        <tr>
            <th>OS</th>
            <th>Version</th> 
        </tr>
        <tr>
            <td>OpenBSD</td>
            <td>5.7</td> 
        </tr>
        <tr>
            <td>Windows</td>
            <td>Please upgrade to 10!</td> 
        </tr>
    </table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
    <div class="bottom">
    	<table>
            <tr>
                <th>OS</th>
                <th>Version</th> 
            </tr>
            <tr>
                <td>OpenBSD</td>
                <td>5.7</td> 
            </tr>
            <tr>
                <td>Windows</td>
                <td>Please upgrade to 10!</td> 
            </tr>
        </table>
    </div>
</div>
this is what you are looking for.

<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

Isso tornará a largura div principal igual à maior largura do elemento.

Tente display: inline-block;. Para que seja compatível com vários navegadores, use o código css abaixo.

div {
  display: inline-block;
  display:-moz-inline-stack;
  zoom:1;
  *display:inline;
  border-style: solid;
  border-color: #0000ff;
}

<div>
  <table>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
  </table>
</div>

Adulterando o Firebug, encontrei o valor da propriedade -moz-fit-contentque exatamente faz o que o OP queria e poderia ser usado da seguinte maneira:

width: -moz-fit-content;

Embora funcione apenas no Firefox, não consegui encontrar nenhum equivalente para outros navegadores, como o Chrome.

Você pode tentar esse código. Siga o código na seção CSS.

div {
  display: inline-block;
  padding: 2vw;
  background-color: green;
}

table {
  width: 70vw;
  background-color: white;
}

<div>
    <table border="colapsed">
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>

    </table>
</div>

Resolvi um problema semelhante (onde não queria usar display: inline-blockporque o item estava centralizado) adicionando uma spanmarca dentro da divmarca e movendo a formatação CSS da divmarca externa para a nova spanmarca interna . Apenas jogar isso lá fora como outra idéia alternativa, se display: inline blocknão for uma resposta adequada para você.

Podemos usar qualquer uma das duas maneiras no divelemento:

display: table;

ou,

display: inline-block; 

Eu prefiro usar display: table;, porque ele lida com todos os espaços extras por conta própria. Embora display: inline-blockprecise de alguma correção de espaço extra.

div{
  width:auto;
  height:auto;
}

Se você tiver contêineres quebrando linhas, depois de horas procurando uma boa solução CSS e não encontrando nenhuma, agora uso o jQuery:

$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});

nav {
  display: inline-block;
  text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
  display: inline;
}

/* needed style */
ul {
  padding: 0;
}
body {
  width: 420px;
}

/* just style */
body {
  background: #ddd;
  margin: 1em auto;
}
button {
  display: block;
}
nav {
  background: #bbb;
  margin: 1rem auto;
  padding: 0.5rem;
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: solid thin #777;
  margin: 4px;
  background: #999;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>fix</button>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
  </ul>
</nav>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
    <li>1</li>
    <li>5</li>
    <li>9</li>
    <li>2</li>
    <li>6</li>
    <li>5</li>
    <li>3</li>
    <li>5</li>
  </ul>
</nav>

Revisado (funciona se você tiver vários filhos): Você pode usar o jQuery (veja o link do JSFiddle)

var d= $('div');
var w;


d.children().each(function(){
 w = w + $(this).outerWidth();
 d.css('width', w + 'px')
});

Não se esqueça de incluir o jQuery ...

Veja o JSfiddle aqui

Eu tentei div.classname{display:table-cell;}e funcionou!