2
votes

Pourquoi la largeur du corps ne s'étend-elle pas à la largeur de ses éléments enfants

J'essaie d'afficher beaucoup de données qui nécessitent un défilement horizontal.

J'ai appris que le corps ne se redimensionnait pas automatiquement à la largeur de ses enfants. Cela devient un problème en raison du style requis sur certains des autres éléments qui devraient être automatiquement redimensionnés pour correspondre à l'élément qui s'étend au-delà de la fenêtre.

Malheureusement, il s'arrête à la largeur du corps. On pourrait penser que le corps serait également redimensionné pour correspondre à la largeur de ses enfants, mais ce n'est pas le cas.

Comment puis-je faire en sorte que le corps et / ou les autres éléments s'ajustent automatiquement? Cela se produit dans Chrome, Firefox, Edge et IE11

Voir violon et code:

<div id="extra-long">This extends beyond the view port</div>
<div id="other-element">This should automatically extend beyond the viewport, but it doesn't</div>

body {
  border: 1px solid red;
  padding: 1rem;
}

#extra-long {
  background-color: salmon;
  width: 200vw;
}

#other-element {
  background-color: cornflowerblue;
}

html css scrollbar

0 commentaires

4 Réponses :

0
votes

vous pouvez gérer cela en ajoutant un petit css dans votre "# extra-long" comme suit:

<style>
#extra-long{
white-space: nowrap;
}
</style>

en ajoutant ci-dessus css votre texte ira toujours sur une seule ligne et moi un scroll automatiquement.

1 commentaires

Le problème n'est pas avec l'habillage de texte, mais la largeur du conteneur. Il s'arrêtera automatiquement au bord du corps, tout en permettant aux enfants de déborder

1
votes

C'est peut-être le comportement par défaut de l'élément body . Vous pouvez ajouter cette règle.

body {
    min-width: min-content;
}

body s'ajustera automatiquement au contenu d'autres éléments

0 commentaires

0
votes

Vous n'avez pas fourni de largeur à la deuxième division, juste une couleur d'arrière-plan:

    #other-element {
  background-color: cornflowerblue;
  width: 200vw;
}

1 commentaires

Cela pose le problème que la largeur ne peut alors être que de 200 vw au lieu de s'étendre automatiquement à la largeur du contenu.

2
votes

Malheureusement, il s'arrête à la largeur du corps. Tu penserais corps serait également redimensionné pour correspondre à la largeur de ses enfants, mais ce n'est pas le cas.

C'est ainsi que les éléments de bloc fonctionnent par défaut - en remplissant la largeur de la fenêtre. Ce dont vous avez besoin, c'est d'un élément en ligne qui ne s'étend que dans la mesure de son contenu.

Vous pouvez obtenir le comportement souhaité en utilisant inline-block code> - voir la démo ci-dessous:
<div id="extra-long">This extends beyond the view port</div>
<div id="other-element">This should automatically extend beyond the viewport, but it doesn't</div>
body {
  border: 1px solid red;
  padding: 1rem;
  width: min-content; /* added */
}

#extra-long {
  background-color: salmon;
  width: 200vw;
}

#other-element {
  background-color: cornflowerblue;
}
Vous pouvez obtenir le même effet en utilisant un conteneur column inline-flex - voir la démo ci-dessous:
<div id="extra-long">This extends beyond the view port</div>
<div id="other-element">This should automatically extend beyond the viewport, but it doesn't</div>
body {
  border: 1px solid red;
  padding: 1rem;
  display: inline-flex; /* added */
  flex-direction: column; /* added */
}

#extra-long {
  background-color: salmon;
  width: 200vw;
}

#other-element {
  background-color: cornflowerblue;
}
Et vous pouvez également utiliser width: min-content mais notez que cela a un rognage inattendu du corps code> marge à la fin - voir la démo ci-dessous:
<div id="extra-long">This extends beyond the view port</div>
<div id="other-element">This should automatically extend beyond the viewport, but it doesn't</div>
body {
  border: 1px solid red;
  padding: 1rem;
  display: inline-block; /* added */
}

#extra-long {
  background-color: salmon;
  width: 200vw;
}

#other-element {
  background-color: cornflowerblue;
}

1 commentaires

Désolé pour les commentaires tardifs qui ont été suivis par d'autres projets. C'est bien! Je vous remercie