[FLEX] Ajuster les conteneurs à leur contenu

**wilfryjules** · 05/09/2024, 17h36

Bonjour à tous,
J'ai essayé d'être le plus explicite possible dans le titre.

J'ai plusieurs conteneurs disposés en mode FLEX avec une direction verticale.
Je souhaite avant tout que la hauteur max de mes conteneurs corresponde à leur contenu, avant d'engager une compétition de "grow" avec les autres conteneurs FLEX.
Malheureusement, je n'ai trouvé aucun exemple clair à ce sujet.

Nom : Capture13.PNG
Affichages : 165
Taille : 30,2 Ko

Le chipsContainer est trop large je veux qu'il fasse la taille du contenu et pas plus. C'est que lorsque le contenu grossit que je souhaite qu'il rentre en compète avec les autres conteneurs.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/******************** DETAILS GROUPE *************************/
.chipsContainer {
    position: relative;
    flex: 1 1 auto;
    flex-direction: column;
    display: flex;
    flex-flow: column;
    min-height: 0;
}
.chipsContainer2 {
    position: absolute;
    height: fit-content;
    min-height: fit-content;
    max-height: 98%;
    width: 98%;
    overflow-y: auto;
    overflow-x: auto;
}

SI je met 0 0 auto la taille devient nulle, je ne comprends pas pourquoi d'ailleurs....

Nom : Capture16.PNG
Affichages : 145
Taille : 12,1 Ko

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.chipsContainer {
    position: relative;
    flex: 0 0 auto;
    flex-direction: column;
    display: flex;
    flex-flow: column;
    min-height: 0;
}

Bien évidemment fit-content ne fonctionne pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.chipsContainer {
    position: relative;
    flex: 1 1 auto;
    flex-direction: column;
    display: flex;
    flex-flow: column;
    height: fit-content;
    max-height:fit-content;
    min-height: 0;
}

Mais une taille max fixe fonctionne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.chipsContainer {
    position: relative;
    flex: 1 1 auto;
    flex-direction: column;
    display: flex;
    flex-flow: column;
    height: fit-content;
    max-height: 300px;
    min-height: 0;
}

Idem pour ce composant:

Nom : Capture14.PNG
Affichages : 144
Taille : 13,6 Ko

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.PanelZone {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: start;
    /*border: 2px solid black;*/
}
 
.panel {    
    position: absolute;
    height: fit-content;
    max-height: 98%;
    width: 98.5%;
    overflow-y: auto;
    overflow-x: hidden;
}

Ensuite j'ai un bouton dans un autre conteneur flex (lui il se comporte bien):
Nom : Capture15.PNG
Affichages : 150
Taille : 14,5 Ko

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.RetourBtn {
    flex: 0 0 auto;
    display: flex;   
    justify-content:end;
}

Ensuite j'ai du vide. Seule méthode que j'ai trouvée pour que le bouton soit le + proche de l'élément précédent. Si vous avez une autre solution...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.BlankSpace {
    flex: 1 1 auto;
}

**mathieu** · 06/09/2024, 02h35

si j'ai bien compris, vous voulez que chipsContainer ait toujours la hauteur de son contenu ?
pour ça vous pouvez faire un bloc div classique en haut qui contient "informations" et "permissions". et à la suite un 2e bloc en disposition flex pour le reste du contenu.

**wilfryjules** · 06/09/2024, 09h20

Merci pour votre réponse mais je souhaite une scrollbar pour les permissions et une autre pour la datatable (d'où les deux conteneurs imbriqués : un en position relatif et l'autre absolu). Aussi quel est l'intérêt des FLEXBOX si on ne peut pas faire ça ? Et j'ai cru comprendre que le 3eme paramètre (flex-basis) permet justement de fixer la taille de départ à la hauteur du contenu (auto ou content).
Et le premier paramètre (flex-grow) est sensé être une valeur de ratio de partage de l'écran pour la compétition.
Mais je ne comprends pas trop pourquoi je ne peux pas faire ça:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.chipsContainer {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    flex-flow: column;
    max-height: fit-content;  /* POURQUOI CA NE FONCTIONNE PAS ?  */
}
.chipsContainer2 {
    position: absolute;
    height: fit-content;
    max-height: 98%;
    width: 98%;
    overflow-y: auto;
    overflow-x: auto;
    border: medium;
    border-color: black;
}

Voici le code html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div class="row chipsContainer">
    <div class="chipsContainer2">
        @foreach (var permission in Model.Permissions)
        {
            <div class="col-lg-12 FilterField margingTop">
                ¤
                @Html.DisplayFor(m => permission.Libelle, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        }
    </div>
</div>

Nom : Capture17.PNG
Affichages : 95
Taille : 59,3 Ko

**mathieu** · 07/09/2024, 13h00

je ne suis pas sûr d'avoir compris ce que vous cherchez à avoir.
regardez mon exemple là avec "max-height", qu'est ce que vous souhaitez par rapport à ça ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
<style>
 
.demonstration_moins_lignes .cache_demo
{
        display : none;
}
 
.chipsContainer2
{
        max-height : 8em;
        overflow : auto;
}
 
 
</style>
 
 
<div id="conteneur">
 
	<div>
		<button id="demonstration">Changer nombre lignes</button>
	</div>
 
	<h4>Permissions&nbsp;: </h4>
	<div class="row chipsContainer">
		<div class="chipsContainer2">
 
 
				<div class="col-lg-12 FilterField margingTop">
					ligne 1 
				</div>
 
				<div class="col-lg-12 FilterField margingTop">
					ligne 2 
				</div>
 
				<div class="col-lg-12 FilterField margingTop">
					ligne 3 
				</div>
 
				<div class="col-lg-12 FilterField margingTop cache_demo">
					ligne 4 
				</div>
 
				<div class="col-lg-12 FilterField margingTop cache_demo">
					ligne 5 
				</div>
 
				<div class="col-lg-12 FilterField margingTop cache_demo">
					ligne 6 
				</div>
 
				<div class="col-lg-12 FilterField margingTop cache_demo">
					ligne 7 
				</div>
 
				<div class="col-lg-12 FilterField margingTop cache_demo">
					ligne 8 
				</div>
 
				<div class="col-lg-12 FilterField margingTop cache_demo">
					ligne 9 
				</div>
 
				<div class="col-lg-12 FilterField margingTop cache_demo">
					ligne 10 
				</div>
 
				<div class="col-lg-12 FilterField margingTop cache_demo">
					ligne 11 
				</div>
 
				<div class="col-lg-12 FilterField margingTop cache_demo">
					ligne 12 
				</div>
 
		</div>
	</div>
 
 
	<h4>Membres&nbsp;: </h4>
	<div class=PanelZone>
		...
	</div>
 
</div>
 
 
<script>
"use strict";
 
document.getElementById("demonstration")
        .addEventListener("click", e => {
                
                document
                        .getElementById("conteneur")
                        ["classList"].toggle("demonstration_moins_lignes")
                ;
                
        })
;
 
</script>

**wilfryjules** · 09/09/2024, 09h33

Merci pour votre réponse, j'ai testé:

Nom : Capture18.PNG
Affichages : 74
Taille : 49,7 Ko

Je souhaite savoir s'il est possible de préalablement ajuster la taille des conteneurs FLEX à leur contenu AVANT de les faire rentrer en compétition pour se partager la taille du conteneur parent.
Par EX si j'ai 2 conteneurs FLEX A et B dans un conteneur parent P.
Disons que A a un flex-grow de 2 et B de 1.
- si A et B ont chacun un gros contenu, disons dépassant chacun largement la taille du conteneur parent, A doit occuper 2/3 de P et B 1/3 (si j'ai bien compris le fonctionnement de flex-grow)
- si A et B ont chacun un très faible contenu, disons 1/10 du conteneur P chacun, ils ne doivent occuper qu'1/10 de P chacun.
- si A un très faible et B un très gros, A doit occuper moins d'espace que B.
J'ai pris deux conteneurs pour la simplicité mais je peux en avoir bcp plus.

Dans votre exemple, sachant qu'il n'y a rien dans "Membres", il ne devrait pas y avoir de scrollbar dans "Permissions".

Mais j'ai bien peur qu'il ne soit pas possible de faire ça...

**mathieu** · 09/09/2024, 10h36

avec une hauteur de conteneur fixée, j'ai essayé cela :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<style>
 
#conteneur
{
        height : 50em;
        
        display : flex;
        flex-flow : column;
}
 
 
.zone
{
        flex-grow : 1;
        overflow : auto;
}
 
.zone2
{
        flex-grow : 2;
}
 
 
/******************************************************/
/* pour la démonstration */
 
#conteneur
{
        width : 50em;
}
 
.demonstration_moins_lignes .cache_demo
{
        display : none;
}
 
.zone
{
        border : 2px solid #000;
}
.zone1
{
        border-color : #99F;
}
.zone2
{
        border-color : #9F9;
}
.zone3
{
        border-color : #F99;
}
 
 
</style>
 
 
<div id="conteneur">
 
 
		<div>
			<h4>Zone 1&nbsp;: </h4>
		</div>
 
		<div class="zone zone1 demonstration_moins_lignes">
 
			<div>
				<button class="demonstration">Changer nombre lignes</button>
			</div>
 
			<div class="row chipsContainer">
				<div class="chipsContainer2">
 
 
						<div class="col-lg-12 FilterField margingTop">
							ligne 1 
						</div>
 
						<div class="col-lg-12 FilterField margingTop">
							ligne 2 
						</div>
 
						<div class="col-lg-12 FilterField margingTop">
							ligne 3 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 4 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 5 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 6 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 7 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 8 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 9 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 10 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 11 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 12 
						</div>
 
				</div>
			</div>
		</div>
 
 
		<div>
			<h4>Zone 2&nbsp;: </h4>
		</div>
 
		<div class="zone zone2 demonstration_moins_lignes">
 
			<div>
				<button class="demonstration">Changer nombre lignes</button>
			</div>
 
			<div class="row chipsContainer">
				<div class="chipsContainer2">
 
 
						<div class="col-lg-12 FilterField margingTop">
							ligne 1 
						</div>
 
						<div class="col-lg-12 FilterField margingTop">
							ligne 2 
						</div>
 
						<div class="col-lg-12 FilterField margingTop">
							ligne 3 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 4 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 5 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 6 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 7 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 8 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 9 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 10 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 11 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 12 
						</div>
 
				</div>
			</div>
		</div>
 
 
		<div>
			<h4>Zone 3&nbsp;: </h4>
		</div>
 
		<div class="zone zone3 demonstration_moins_lignes">
 
			<div>
				<button class="demonstration">Changer nombre lignes</button>
			</div>
 
			<div class="row chipsContainer">
				<div class="chipsContainer2">
 
 
						<div class="col-lg-12 FilterField margingTop">
							ligne 1 
						</div>
 
						<div class="col-lg-12 FilterField margingTop">
							ligne 2 
						</div>
 
						<div class="col-lg-12 FilterField margingTop">
							ligne 3 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 4 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 5 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 6 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 7 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 8 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 9 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 10 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 11 
						</div>
 
						<div class="col-lg-12 FilterField margingTop cache_demo">
							ligne 12 
						</div>
 
				</div>
			</div>
		</div>
 
 
</div>
 
 
<script>
"use strict";
 
document.addEventListener("click", e => {
        
        e["target"]
                .closest(".zone")
                ["classList"].toggle("demonstration_moins_lignes")
        ;
        
});
 
</script>

**wilfryjules** · 10/09/2024, 12h49

J'ai regardé mais je suis pas sûr que ça soit ce que je souhaite.

Ce que je ne comprends pas c'est pourquoi max-height = fit-content ne fonctionne pas sur un block flex.

On est d'accord que le contenu de chipsContainer c'est bien chipsContainer2...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.chipsContainer {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    // NE MARCHE PAS , POURQUOI ?? Par contre une donnée en dur fonctionne (ex: max-height=200px)
    height: fit-content !important;
    max-height: fit-content !important;
    margin-left: 3px;
    margin-right: 3px;
    border: ridge;
    border-color: lightgray;
}
.chipsContainer2 {
    position: absolute;
    height: fit-content !important;    
    max-height: 98%;
    width: 98%;
    overflow-y: auto;
    overflow-x: auto;
    border: dashed;
    border-color:yellowgreen;
}

**wilfryjules** · 04/10/2024, 12h52

Quelqu'un peut-il répondre de façon claire à cette question:
"Est-il possible de préalablement ajuster la taille des conteneurs FLEX à leur contenu AVANT de les faire rentrer en compétition pour se partager la taille du conteneur parent."

Pourquoi cela ne marche-t-il pas ? :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11

.dropZoneMainContainer {
    position: relative;
    flex: 2 1 auto;
    max-height: fit-content!important;
    display: flex;
    justify-content: center;
    align-content: center;
    margin-bottom:5px;     
}

Je veux que dans le cas ou il y peu de contenu, le conteneur "dropZoneMainContainer" soit plus petit (max-height: fit-content!important), et qu'il n'occupe que les 2/3 de l'espace du conteneur parent (flex: 2 1 auto

que lorsqu'il est chargé au max.

Voilà si quelqu'un peut me dire, simplement et sans exemple, s'il est possible de faire ça.

**mathieu** · 04/10/2024, 13h01

vous ne m'avez pas dit ce qui ne vous convient pas dans mon exemple là :
https://www.developpez.net/forums/d2.../#post12043089

quand il y a peu de contenu, il y a bien la zone 2 (flex-grow : 2) qui prend 2 fois plus de place que la zone 1 (flex-grow = 1).

**wilfryjules** · 04/10/2024, 14h43

Merci pour votre aide, justement c'est uniquement lorsqu'il y a bcp de contenu que je souhaite ce comportement. Mais quand le conteneur est vide, je veux que sa taille soit réduite et qu'il occupe moins d'espace que son conteneur concurrent, quelle que soit son flex-grow.

[FLEX] Ajuster les conteneurs à leur contenu

Positionnement en CSS avec flexbox

Discussions similaires

Partager

Partager