¿Cómo puedo hacer un div no más grande que su contenido?

Tengo un diseño similar a:

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

Me gustaría que el divsolo se expanda tanto como tablesea ​​posible.

La solución es configurar su diva display: inline-block.

Desea un elemento de bloque que tenga lo que CSS llama ancho de contracción y la especificación no proporciona una forma bendecida de obtener tal cosa. En CSS2, reducir para ajustar no es un objetivo, sino que significa lidiar con una situación en la que el navegador "tiene" que obtener un ancho de la nada. Esas situaciones son:

• flotador
• elemento absolutamente posicionado
• elemento de bloque en línea
• elemento de tabla

cuando no hay ancho especificado. Escuché que piensan en agregar lo que quieres en CSS3. Por ahora, hazte con uno de los anteriores.

La decisión de no exponer la función directamente puede parecer extraña, pero hay una buena razón. Es caro. Reducir para ajustar significa formatear al menos dos veces: no puede comenzar a formatear un elemento hasta que sepa su ancho, y no puede calcular el ancho sin pasar por todo el contenido. Además, no se necesita un elemento de contracción tan a menudo como se pueda pensar. ¿Por qué necesitas div extra alrededor de tu mesa? Tal vez el título de la tabla es todo lo que necesitas.

Creo que usando

display: inline-block;

funcionaría, sin embargo, no estoy seguro de la compatibilidad del navegador.

Otra solución sería envolverlo diven otro div(si desea mantener el comportamiento de bloqueo):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

display: inline-block agrega un margen extra a su elemento.

Yo recomendaría esto:

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

Bonificación: ahora también puede centrar fácilmente esa nueva fantasía #elementsimplemente agregando margin: 0 auto.

Puedes probar fit-content(CSS3):

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

• Soporte del navegador
• Especificación

Lo que funciona para mí es:

display: table;

en el div. (Probado en Firefox y Google Chrome ).

Hay dos mejores soluciones

1. display: inline-block;

   O

2. display: table;

De estos dos display:table;es mejor, porque display: inline-block;agrega un margen extra.

Para display:inline-block;que pueda utilizar el método de margen negativo para arreglar el espacio extra

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

Foo Hack - Soporte de navegador cruzado para estilo de bloque en línea (2007-11-19) .

Sin saber en qué contexto esta aparecerá, pero creo que el establecimiento de estilo CSS float, ya sea lefto righttendrá este efecto. Por otro lado, también tendrá otros efectos secundarios, como permitir que el texto flote a su alrededor.

Sin embargo, corríjame si estoy equivocado, no estoy 100% seguro y actualmente no puedo probarlo yo mismo.

La respuesta a su pregunta está en el futuro, mi amigo ...

a saber, "intrínseco" viene con la última actualización de CSS3

width: intrinsic;

desafortunadamente IE está atrasado con él, así que aún no lo admite

Más información al respecto: CSS Intrinsic & Extrinsic Sizing Module Level 3 y ¿puedo usarlo? : Dimensionamiento intrínseco y extrínseco .

Por ahora tienes que estar satisfecho <span>o <div>configurado

display: inline-block;

Una solución compatible con CSS2 es usar:

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

También puede flotar su div, lo que lo forzará lo más pequeño posible, pero necesitará usar una corrección clara si algo dentro de su div está flotando:

.my-div
{
    float: left;
}

width:1px;
white-space: nowrap;

funciona bien para mí :)

De acuerdo, en muchos casos, incluso no es necesario hacer nada, ya que por defecto div lo ha hecho heighty widthcomo automático, pero si no es tu caso, aplicar la inline-blockpantalla funcionará para ti ... mira el código que creo para ti y listo Qué estás buscando:

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>

Esto se ha mencionado en los comentarios y es difícil de encontrar en una de las respuestas:

Si está usando display: flexpor cualquier razón, puede usar:

div {
    display: inline-flex;
}

Esto también es ampliamente compatible en todos los navegadores.

Puede hacerlo simplemente usando display: inline;(o white-space: nowrap;).

Espero que encuentres esto útil.

Puede usar inline-blockcomo @ user473598, pero tenga cuidado con los navegadores más antiguos.

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

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

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

Mozilla no admite bloqueo en línea en absoluto, pero tienen lo -moz-inline-stackque es casi lo mismo

Algunos inline-blockatributos de visualización alrededor del navegador : https://css-tricks.com/snippets/css/cross-browser-inline-block/

Puede ver algunas pruebas con este atributo en: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Simplemente ponga un estilo en su archivo 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>

Sé que a la gente no le gustan las tablas a veces, pero debo decirte que probé los hacks en línea css, y funcionaron en algunos divs pero en otros no, así que, en realidad, fue más fácil encerrar el div en expansión una tabla ... y ... puede tener o no la propiedad en línea y aún así la tabla es la que va a contener el ancho total del contenido. =)

Una demostración de trabajo está aquí

.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>

Mi solución CSS3 flexbox en dos sabores: el de arriba se comporta como un tramo y el de abajo se comporta como un div, tomando todo el ancho con la ayuda de un contenedor. Sus clases son "top", "bottom" y "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>

Esto hará que el ancho div principal sea igual al ancho del elemento más grande.

Tratar display: inline-block;. Para que sea compatible con varios navegadores, utilice el siguiente código CSS.

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>

Al manipular Firebug, encontré el valor de la propiedad -moz-fit-contentque hace exactamente lo que el OP quería y podría usarse de la siguiente manera:

width: -moz-fit-content;

Aunque solo funciona en Firefox, no pude encontrar ningún equivalente para otros navegadores como Chrome.

Puedes probar este código. Sigue el código en la sección 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>

He resuelto un problema similar (donde no quería usar display: inline-blockporque el elemento estaba centrado) agregando una spanetiqueta dentro de la divetiqueta y moviendo el formato CSS de la divetiqueta externa a la nueva spanetiqueta interna . Simplemente lanzar esto como otra idea alternativa si display: inline blockno es una respuesta adecuada para usted.

Podemos usar cualquiera de las dos formas en el divelemento:

display: table;

o,

display: inline-block; 

Prefiero usar display: table;, porque maneja, todos los espacios adicionales por sí solo. Mientras que display: inline-blocknecesita un poco de espacio extra de fijación.

div{
  width:auto;
  height:auto;
}

Si tiene contenedores que rompen líneas, después de horas buscando una buena solución CSS y no encontrando ninguna, ahora uso jQuery en su lugar:

$('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 si tiene varios hijos): puede usar jQuery (Mire el enlace JSFiddle)

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


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

No olvides incluir el jQuery ...

Mira el JSfiddle aquí

Lo intenté div.classname{display:table-cell;}y funcionó!