Erreur : ajustement auto largeur de div

Ajustement au de la largeur de sous sections pour scroll horizontal

5 décembre 2017 à 1:11:43

Bonjour à tous les zéros ! :-)

Je suis actuellement en train de créer une interface et je voudrais avoir un bloc principal (appelons le 'contenant'), avec plusieurs blocs secondaires à l'intérieur, et si il y a trop de blocs secondaires, une barre de défilement apparaît alors.

Exemple : un bloc principal de 400 pixels de large et des blocs secondaires de 100px de large:

#contenant{
	width: 400px;
	height: 70px;
	overflow: scroll;
	display: flex;
	flex-direction: row-reverse;
	border: 3px black solid;
	padding: 5px;
}

.contenu{
	width: 100px;
	height: 20px;
	border: 2px blue solid;
	border-radius: 5px;	

}

Quand il n'y a que 3 blocs à l'intérieur, la largueur totale des blocs secondaires est de 3x100 = 300px, donc ça rentre dans le bloc principal de 400px :

Cependant, si je rajoute deux autres blocs secondaires, la barre de défilement horizontale reste "inactivable" et la largeur des blocs est automatiquement ajustée : (nb : l'image est plus petite mais dans la réalité, le cadre principal noir est de même taille)

Voici une version très basique du code html qui m'a permis d'arriver à cette situation :

<!DOCTYPE html>

<html lang="fr">

	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="CSS/cadreScroll.css" />
		<title> Golden Book - Welcome </title>
	</head>

	<body>

		<section id="contenant">

		
			<div class="contenu">
				
			</div>

			<div class="contenu">
				
			</div>

			<div class="contenu">
				
			</div>
			
			<div class="contenu">
				
			</div>

			<div class="contenu">
				
			</div>
			
			

		</section>

	</body>


</html>

Comment puis-je ajuster mon code ? (css ou html)

Merci d'avance pour votre aide,

-
Edité par Lenahic 5 décembre 2017 à 1:13:42

Parce que les seules limites sont celles qu'on se fixe !

GuillaumeBo1

5 décembre 2017 à 1:22:17

alors CSS et HTML ne t'aiderons pas. ce qu'il te faut c'est du JS en plus. Si j'ai bien compris tu veux que ton CSS fonctionne toujours quelques soit le nombre de div dedans. Pour cela tu vas demander a une fonction JS d'écouter ta section et de compter ces enfants et tu enregistres ça dans une variable. ensuite tu demandes la taille de ta section et tu fait le fameux calcul : tailleSection/nbEnfants = tailleEnfant. ne pas oublier d'enlever la taille du padding s'il y en a un.

-
Edité par GuillaumeBo1 5 décembre 2017 à 1:22:33

Un homme azerty en vaut deux.