Maison > Article > interface Web > Comment résoudre le problème de débordement dans la mise en page CSS Flex ?

Comment résoudre le problème de débordement dans la mise en page CSS Flex ?

PHPzavant: 2023-08-28 19:21:011706parcourir

Pour résoudre le problème de débordement dans la mise en page CSS Flex, nous allons résoudre les deux exemples suivants -

Correction du débordement - définissez la hauteur du div externe pour qu'elle soit toujours égale au div interne spécifique
Évitez les débordements lors de l'imbrication des conteneurs flexibles

Définissez la hauteur du div externe pour qu'elle soit toujours égale à un div interne spécifique et corrigez les problèmes de débordement

Exemple

Nous utilisons Flex pour résoudre le problème de débordement entre les divs internes et externes. Voyons un exemple −

<!DOCTYPE html>
<html>
<head>
   <style>
   .outer {
      display: flex;
      border: 1px solid blue;
      padding: 5px;
      box-sizing: border-box;
   }
   .outer>div {
      flex: 1;
      margin: 5px;
      border: 1px solid;
      box-sizing: border-box;
   }
   div.inner {
      border-color:orange;
   }
   .inner-in {
      position: relative;
      overflow: auto;
   }
   .inner-in>div {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
   }         
   </style>
</head>
<body>
   <h1>Adjusting Inner and Outer Div</h1>
   <div class="outer">
      <div class="inner">In faucibus dictum mauris quis molestie. Nulla vestibulum ipsum eget pulvinar euismod. Fusce pulvinar volutpat scelerisque. Ut pretium commodo faucibus. </div>
      <div class="inner-in">
         <div>Vestibulum et mauris eleifend, ornare augue at, mattis lacus. Mauris aliquet viverra aliquam. Nunc ac nibh tempus, interdum libero in, pellentesque nisi.</div>
      </div>
      <div class="inner-in">
         <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. 
         Vivamus ac tincidu. Pellentesque fringilla pulvinar orci, non dapibus tortor aliquam 
         vel. Aenean eget quam vel nisi malesuada auctor nec quis nunc. Morbi eu tempor nunc</div>
      </div>
   </div>
   <div class="outer">
      <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
      dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh 
      sed iaculis vulputate</div>
      <div class="inner-in">
         <div>Vestibulum et mauris eleifend, ornare augue at, mattis lacus. Mauris aliquet 
         viverra aliquam. Nunc ac nibh tempus, interdum libero in, pellentesque nisi. Nullam 
         tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
      </div>
      <div class="inner-in">
         <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
      </div>
   </div>
   <div class="outer">
      <div class="inner">In faucibus dictum mauris quis molestie. Nulla vestibulum ipsum eget 
      pulvinar euismod. Fusce pulvinar volutpat scelerisque. Ut pretium commodo faucibus. 
      vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , 
      eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
      <div class="inner-in">
         <div>Donec eget libero est. Vestibulum libero tellus, aliquam non mattis quis, 
         pellentesque eu quam. Duis laoreet scelerisque risus, elementum porttitor dui 
         tincidunt quis. Ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc 
         volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh 
         sed iaculis vulputate. Vivamus ac tincidu</div>
      </div>
      <div class="inner-in">
         <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
      </div>
   </div>
</body>
</html>

Sortie

Évitez les problèmes de débordement lors de l'imbrication des conteneurs flexibles

Nous avons deux divs dans notre div parent ParentBox -

<div class='parentBox'>
   <div class='childBox'>
      <div class='babyChildBox'>Parent's Child</div>
      <div class='babyChildBox'>Parent's Child</div>
   </div>
   <! - - -
   !-->
</div>

Le style du conteneur parent. Nous utilisons les propriétés raccourcies CSS Flex -

.parentBox {
   display: flex;
   flex: 1 0 100%;
   background-color:yellow;
   border: 3px solid skyblue;
}

Pour l'élément enfant, à savoir childBox, nous utilisons à nouveau l'attribut abréviation pour définir la longueur élastique de l'élément élastique -

.childBox {
   flex: 1 1 50%
   background-color: green;
   color: white;
   border: 1px solid blue;
}

Les enfants imbriqués dans .childBox ci-dessus sont définis à l'aide de Flex. Ceci et les versions supérieures ont des conteneurs Flex imbriqués -

.babyChildBox {
   flex: 1 1 50%;
   background-color: orange;
}

Exemple

Voyons maintenant un exemple complet d'imbrication correcte de conteneurs flexibles et d'essayer d'éviter les problèmes de débordement -

<!DOCTYPE html>
<html>
<head>
   <style> 
   .parentBox {
      display: flex;
      flex: 1 0 100%;
      background-color:yellow;
      border: 3px solid skyblue;
   }
   .childBox {
      flex: 1 1 50%
      background-color: green;
      color: white;
      border: 1px solid blue;
   }
   .babyChildBox {
      flex: 1 1 50%;
      background-color: orange;
   }
   </style>
</head>
<body>
   <h1>Implementing Flex</h1>
   <div class='parentBox'>
      <div class='childBox'>
         <div class='babyChildBox'>Parent's Child</div>
         <div class='babyChildBox'>Parent's Child</div>
      </div>
      <div class='childBox'>
         <div class='babyChildBox'>Parent's Child</div>
         <div class='babyChildBox'>Parent's Child</div>
      </div>
   </div>
</body>
</html>

Sortie

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css flex

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Le rôle de la valeur de ligne de la propriété CSS flex-directionArticle suivant：Le rôle de la valeur de ligne de la propriété CSS flex-direction

Articles Liés

Voir plus