Wie kann ich ein Div nicht größer als sein Inhalt machen?

Question

Ich habe ein ähnliches Layout:

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

Ich möchte, dass die div nur so weit ausdehnen, wie mein table wird.

Answer 1

Eine CSS2-kompatible Lösung ist die Verwendung:

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

Sie können Ihr div auch schweben lassen, was es so klein wie möglich macht, aber Sie müssen eine clearfix wenn irgendetwas innerhalb Ihres Divs schwebt:

.my-div
{
    float: left;
}

Answer 2

width:1px;
white-space: nowrap;

funktioniert bei mir gut :)

Answer 3

Dies wurde in Kommentaren erwähnt und ist in einer der Antworten schwer zu finden:

Wenn Sie Folgendes verwenden display: flex aus welchem Grund auch immer, können Sie stattdessen verwenden:

div {
    display: inline-flex;
}

Dies wird auch von vielen Browsern unterstützt.

Answer 4

Fügen Sie einfach einen Stil in Ihre CSS-Datei ein

div { 
    width: fit-content; 
}

Answer 5

GUT, In vielen Fällen brauchen Sie gar nichts zu tun, da div standardmäßig über height et width als Auto, aber wenn das bei Ihnen nicht der Fall ist, sollten Sie inline-block Display gonna work für Sie ... schauen Sie sich den Code, den ich für Sie erstellen und es ist tun, was Sie suchen:

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>