Pourquoi le débordement remplace-t-il la largeur du conteneur parent?
J'ai une requête multimédia qui fait passer mon conteneur à une largeur de 90% lorsque l'écran devient inférieur à 550 pixels et lorsque le générateur de mots de passe déborde, il pousse la largeur à 500 pixels au lieu de 90%. Comment puis-je réparer cela? Le débordement se produit lorsque je sélectionne l'une des options de mot de passe et que je règle la longueur sur 50.
Oof ce site me fait un peu mal aux yeux,
Eh bien, c'est parce que vous utilisez flexbox sur le corps, pour résoudre ce problème, essayez:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
body,
html {
padding: 0;
margin: 0;
background-color: blueviolet;
font-family: "Poppins", sans-serif;
color: black;
font-weight: 700;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h2 {
text-align: center;
font-size: 1.1em;
}
#generatorContainer {
width: 90%;
border: 2px solid white;
background-color: rgb(50, 64, 168);
padding: 0.5em;
}
#passwordContainer {
border-radius: 0.5em;
background-color: #3399ff;
overflow: auto;
}
.passwordFeaturesContainer {
display: flex;
justify-content: space-between;
margin: 0.5em 0;
}
#generatePasswordButton {
margin: 0 auto;
width: 80%;
display: block;
height: 60px;
}
#generatePasswordButton {
cursor: pointer;
background-color: rgb(50, 168, 52);
outline: none;
box-shadow: none;
color: rgb(50, 64, 168);
font-size: 1.2em;
font-weight: 700;
}
@media only screen and (min-width: 551px){
#generatorContainer {
width: 500px;
}
}<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Generator</title>
<!-- custom css -->
<link rel="stylesheet" href="style.css">
<!-- favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png">
<script data-dapp-detection="">
(function() {
let alreadyInsertedMetaTag = false
function __insertDappDetected() {
if (!alreadyInsertedMetaTag) {
const meta = document.createElement('meta')
meta.name = 'dapp-detected'
document.head.appendChild(meta)
alreadyInsertedMetaTag = true
}
}
if (window.hasOwnProperty('web3')) {
// Note a closure can't be used for this var because some sites like
// www.wnyc.org do a second script execution via eval for some reason.
window.__disableDappDetectionInsertion = true
// Likely oldWeb3 is undefined and it has a property only because
// we defined it. Some sites like wnyc.org are evaling all scripts
// that exist again, so this is protection against multiple calls.
if (window.web3 === undefined) {
return
}
__insertDappDetected()
} else {
var oldWeb3 = window.web3
Object.defineProperty(window, 'web3', {
configurable: true,
set: function (val) {
if (!window.__disableDappDetectionInsertion)
__insertDappDetected()
oldWeb3 = val
},
get: function () {
if (!window.__disableDappDetectionInsertion)
__insertDappDetected()
return oldWeb3
}
})
}
})()</script></head>
<body>
<div class="flex">
<form id="generatorContainer">
<div id="passwordContainer">
<h2>Password Generator</h2>
</div>
<div class="passwordFeaturesContainer">
<label for="passLength">Password Length</label>
<input type="number" step="1" min="4" max="50" id="passLength" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="lowerCase">Contain Lowercase Letters</label>
<input type="checkbox" id="lowerCase" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="upperCase">Contain Uppercase Letters</label>
<input type="checkbox" id="upperCase" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="numbers">Contain Numbers</label>
<input type="checkbox" id="numbers" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="symbols">Contain Symbols</label>
<input type="checkbox" id="symbols" required="">
</div>
<button type="submit" id="generatePasswordButton">Generate Password</button>
</form>
</div>
<script src="main.js"></script>
</body></html>J'ai ajouté un div flex autour du générateur et ajouté une classe pour flex également ... Essayez d'éviter beaucoup de style sur les éléments générés standard comme html, body, script, etc. Et s'il vous plaît essayez de commencer à styliser dans une perspective mobile ( la plupart des utilisateurs Web sont généralement des utilisateurs mobiles), donc au lieu d'utiliser des requêtes multimédias avec max-width, utilisez min-width: 551px; Dans votre cas, vous n'avez finalement pas besoin d'une requête multimédia à la place. Si vous utilisez uniquement max-width: 500px; sur votre #generatorContainer c'est assez.
Bon codage !!