Comment faire en sorte qu'une division parent s'adapte automatiquement à la largeur de ses divisions enfants ?

Question

J'essaie de faire en sorte que la division parent soit aussi large que les divisions enfant. La largeur automatique permet à la division parentale de s'adapter à la totalité de l'écran. Les divisions enfants auront des largeurs différentes en fonction de leur contenu. Il faut donc que la division parent s'adapte en conséquence.

<div style='width:auto;'>
  <div style="width: 135px; float: left;">
    <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
    </dl>

    <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
    </dl>
  </div>

  <div style="width: 135px; float: right;">
    <h4 style="padding-right: 5px; padding-left: 10px;">Column2</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
      <dd style="white-space: nowrap;">3</dd>
    </dl>
  </div>
</div>

Answer 1

Votre intérieur <div> devraient probablement être tous deux float:left . Les Divs s'ajustent automatiquement à 100% de la largeur de leur conteneur. Essayez d'utiliser display:inline-block au lieu de width:auto sur le div du conteneur. Ou éventuellement float:left le conteneur et appliquer également overflow:auto . Cela dépend de ce que vous recherchez exactement.

Answer 2

C'est le moyen le plus simple de faire en sorte que votre div parent hérite de la largeur de son enfant.

.container-fluid {
  border: 1px solid black;
  /*the needed css class to make your parent div responsive to it's children's max-width
  */
  width: max-content
}
.wrapper {
  border: 1px solid red;
  width: 300px
}

<div class="container-fluid">
  <div class="wrapper">xxx</div>
</div>

J'espère que quelqu'un trouvera cela utile

Answer 3

La div parent (je suppose la div la plus extérieure) est display: block et remplira toute la largeur disponible de son conteneur (dans ce cas, le corps) qu'il peut. L'utilisation d'un autre type d'affichage -- inline-block est probablement ce que vous recherchez :

http://jsfiddle.net/a78xy/

Answer 4

Je me débattais avec ce problème et je réglais la largeur de mon composant parent. Par hasard, j'ai découvert que le CSS width: fit-content ;

Voici un exemple :

.outerContainer {
  width: 300px;
  height: 300px;
  background: gray;
}

.innerContainer {
  width: fit-content;
  border: 3px solid red;
}

.item {
  width: 200px;
  height: 200px;
  padding: 10px;
  background: blue;
}

<div class="outerContainer">
  <div class="innerContainer">
    <div class="item">
    </div>
  </div>
</div>

Dans l'exemple, le innerContainer (celui avec un arrière-plan rouge) s'adapte au contenu de la balise item conteneur. Le site outerContainer div est là pour montrer le contraste.