JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang=fr>
<head>
<title>Largeur boîte page 113 HTML5 et CSS3</title>
<meta charset="UTH8"/>
<style>
#conteneur {
display: flex;
width: 370px;
height: 300px;
border: 1px solid #333;
}
#maBoite3 {
background-color: #c5bfbf;
width: 400px; /* Largeur de la boîte */
height: 100px; /* Hauteur de la boîte */
padding: 0px;
border: 1px solid #333; /* Epaisseur bordure */
overflow: auto; /* Affiche barre de défilement si besoin */
margin-bottom: : 30px;
}
#maBoite4 {
background-color: #aaa4a4;
opacity: 0.5; /* Opacité du texte un peu exagéré pour mieux voir l'effet produit */
position: absolute;
top: 190px; /* A augmenter si insertion de texte avant la boîte(position absolue volontaire) */
width: 400px;
height: 100px;
padding: 0;
border: 1px solid red;
overflow-x: scroll; /* Indispensable pour barre défilement */
white-space: nowrap; /* Indispensable pour barre de défilement */
margin-bottom: 30px;
}
.pasMarge {
margin: 0;
}
.h1 {
font-size: 1.5em;
color: blue;
margin: 0px;
padding: 0;
}
.h2 {
margin: 0;
color: red;
}
p {
color: yellow;
}
</style>
</head>
<body>
<h1 class="h1">PAGE 113 FLEXBOX ET GRID</h1>
<h2 class="h2">Débordement contenu</h2>
<div id="maBoite3">
<div class="pasMarge">
<p>
Composé de deux à cinq pales, sa première fonction est d'assurer la portance du modèle, pour lui permettre de rester en vol, en augmentant le pas des pales de la même valeur, pour la montée.<br>
Ou en diminuant l'angle des pales de la même valeur, pour la descente. C'est le collectif qui le permet.<br>
Sa deuxième fonction est d'assurer les translations avant, arrière, droite, gauche. C'est le cyclique qui le permet.<br>
Pour cela, le rotor s'incline en avant, en arrière, à droite, à gauche, par l'intermédiaire du plateau oscillant, dont il est nécessaire de bien comprendre le fonctionnement.<br>
Le souffle engendré par le rotor(vortex) est ainsi...