J'ai un div avec plusieurs div s dedans et je veux que chacun des enfants div prenne 100% de hauteur et 100% de largeur de sorte que seul le premier des ils sont en fait visibles (le parent a overflow: hidden) et le reste est à sa droite, mais masqué. Quand j'essaye de leur donner tous height: 100%; width: 100%;, ils n'obtiennent pas la pleine largeur du parent, mais au lieu de cela, la pleine largeur est divisée entre eux afin qu'ils soient tous visibles.

.parent {
  display: flex;
  flex-direction: row;
  width: 200px;
  height: 200px;
  overflow: hidden !important;
}

.children {
  height: 100%;
  width: 100%;
  position: relative;
}

#child1 {
  background-color: red;
}

#child2 {
  background-color: green;
}
<div class="parent">
  <div class="children" id="child1"></div>
  <div class="children" id="child2"></div>
</div>

E: J'ai ajouté mon code.

2
opportunityr 30 déc. 2017 à 21:36

5 réponses

Meilleure réponse

Vous pouvez définir pour les enfants: flex-shrink: 0;

2
nazg 30 déc. 2017 à 18:54

La balise div est un élément de niveau bloc et a un comportement par défaut qui s'affiche sous forme de bloc. Vous devriez probablement penser à utiliser une commande display: none pour que les éléments ne prennent pas de place. Presque tous les éléments de CSS ont un comportement par défaut que vous devez changer si vous voulez qu'un élément se comporte différemment. Si CSS ne comprend pas une commande, il l'ignore simplement et continue comme si aucune commande n'avait été émise. CSS se comporte comme ceci afin que le rendu ne s'arrête pas brutalement chaque fois qu'une erreur est rencontrée. C'est en contraste frappant avec les langages de programmation où vous auriez une exception ou une erreur levée. Il semble que le comportement que vous souhaitez est que les éléments non visibles ne prennent pas de place dans l'élément conteneur, ce qui serait accompli avec l'attribut display: none. Vous pouvez toujours utiliser getComputedStyle () sur un élément de la console pour voir quels styles sont réellement appliqués à un élément

0
Matthew Lagerwey 30 déc. 2017 à 18:47

Vous pouvez définir max-height du parent identique à height de l'enfant

.child {
  height: 100px;
  width: 100%;
}

.parent {
  max-height: 100px;
  width: auto;
  overflow: auto;
  border: 1px solid red;
}
<div class="parent">
  <div class="child">Notice how we’re using the same interface (subscribe) to deal with totally different types of operations (including the document listener we added in the previous example). This is one of the major strengths of using Observables. We don’t need to wire
    our brains differently. If the data can be thought of as evented, stream or async, we can wrap it in an Observable.</div>
  <div class="child">Notice how we’re using the same interface (subscribe) to deal with totally different types of operations (including the document listener we added in the previous example). This is one of the major strengths of using Observables. We don’t need to wire
    our brains differently. If the data can be thought of as evented, stream or async, we can wrap it in an Observable.</div>
  <div class="child">Notice how we’re using the same interface (subscribe) to deal with totally different types of operations (including the document listener we added in the previous example). This is one of the major strengths of using Observables. We don’t need to wire
    our brains differently. If the data can be thought of as evented, stream or async, we can wrap it in an Observable.</div>
  <div class="child">Notice how we’re using the same interface (subscribe) to deal with totally different types of operations (including the document listener we added in the previous example). This is one of the major strengths of using Observables. We don’t need to wire
    our brains differently. If the data can be thought of as evented, stream or async, we can wrap it in an Observable.</div>
  <div class="child">Notice how we’re using the same interface (subscribe) to deal with totally different types of operations (including the document listener we added in the previous example). This is one of the major strengths of using Observables. We don’t need to wire
    our brains differently. If the data can be thought of as evented, stream or async, we can wrap it in an Observable.</div>
</div>
0
brk 30 déc. 2017 à 18:46

Si je vous comprends bien, vous voulez qu'ils soient côte à côte. Dans ce cas, le premier sera visible et le reste sera hors de la zone visible parente. Vous pouvez créer des blocs enfants en ligne et découper le texte sur le parent. Cela vous donnera l'effet que vous souhaitez.

J'utiliserai overflow: scroll au lieu de overflow: hidden dans mon exemple ci-dessous, juste pour que vous puissiez faire défiler et voir les autres cases.

.parent {
  background-color: #f00;
  height: 100px;
  white-space: nowrap;
  overflow-x: scroll;
}

.child {
  display: inline-block;
  background-color: #0ff;
  height: 100%;
  width: 100%;
}
<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
  <div class="child">Child 4</div>
  <div class="child">Child 5</div>
</div>

Notez qu'il y a des écarts entre les enfants. Cela est dû au fait que l'espace blanc entre les objets en ligne est converti en un espace. Pour vous en débarrasser, supprimez l'espace blanc entre les enfants. Vous pouvez le faire, en le supprimant physiquement ou en le convertissant en commentaire:

.parent {
  background-color: #f00;
  height: 100px;
  white-space: nowrap;
  overflow-x: scroll;
}

.child {
  display: inline-block;
  background-color: #0ff;
  height: 100%;
  width: 100%;
}
<div class="parent">
  <div class="child">Child 1</div><div
       class="child">Child 2</div><div
       class="child">Child 3</div><div
       class="child">Child 4</div><div
       class="child">Child 5</div>
</div>
1
Racil Hilan 30 déc. 2017 à 19:03

Vous pouvez le faire avec le flex: 0 0 100% sur le .children où vous empêchez flex-items de croître et de diminuer , et définissez leur largeur initiale sur 100%:

.parent {
  display: flex;
  /*flex-direction: row; by default*/
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.children {
  flex: 0 0 100%;
  /*height: 100%;*/
  /*width: 100%;*/
  /*position: relative;*/
}

#child1 {
  background: red;
}

#child2 {
  background: green;
}
<div class="parent">
  <div class="children" id="child1"></div>
  <div class="children" id="child2"></div>
</div>
1
VXp 30 déc. 2017 à 20:11