web-dev-qa-db-fra.com

l'enfant flexible grandit hors du parent

Comment forcer les boîtes vertes à être contenues dans la rouge sans définir une valeur de hauteur statique et aucune position absolue?

Je veux réduire le contenu pour l'adapter au parent.

Le contenu (vidéo dans ce cas) peut rétrécir et les barres de défilement sont autorisées.

.my-box {
  height: 300px;
  width: 600px;
  background: red;
  padding: 5px;
}
.content-box {
  background: blue;
}
.col {
  display: flex;
  flex-direction: column;
  justify-content: space-between
}
.box-shrink {
  flex: 0 1 auto;
  background: green;
  padding: 5px;
  margin: 5px;
}
.box-grow {
  flex: 1 0 auto;
  background: green;
  padding: 5px;
  margin: 5px;
}
video {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  display: block;
}
<div class="my-box col">
  <div class="box-shrink">
    small sized static content
  </div>
  <div class="content-box box-grow">
    <video controls>
      <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
    </video>
  </div>
  <div class="box-shrink">
    small sized static content
  </div>
</div>
htmlcsscss3flexbox
20
Exlord

Solution n ° 1 - sans défilement

Au lieu de flex: 1 0 auto sur le conteneur vidéo, utilisez simplement flex: 1. Cela dimensionne l'élément en fonction de l'espace disponible et non de la hauteur intrinsèque du contenu.

Ensuite, parce que les éléments flexibles ne peuvent pas être plus petits que la taille de leur contenu - min-height: auto est la valeur par défaut - ajoutez min-height: 0 pour permettre à l'article de rétrécir pour s'adapter à l'intérieur du conteneur.

.box-grow {
  flex: 1; /* formerly flex: 1 0 auto; */
  background: green;
  padding: 5px;
  margin: 5px;
  min-height: 0; /* new */
}

.my-box {
  height: 300px;
  width: 600px;
  background: red;
  padding: 5px;
}
.content-box {
  background: blue;
}
.col {
  display: flex;
  flex-direction: column;
  justify-content: space-between
}
.box-shrink {
  flex: 0 1 auto;
  background: green;
  padding: 5px;
  margin: 5px;
}
.box-grow {
  flex: 1; /* formerly flex: 1 0 auto; */
  background: green;
  padding: 5px;
  margin: 5px;
  min-height: 0; /* new */
}
video {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  display: block;
}
<div class="my-box col">
  <div class="box-shrink">
    small sized static content
  </div>
  <div class="content-box box-grow">
    <video controls>
      <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
    </video>
  </div>
  <div class="box-shrink">
    small sized static content
  </div>
</div>

Solution # 2 - Avec Scroll

Vous pouvez également donner au conteneur vidéo overflow: auto, qui fait la même chose que ci-dessus, sauf qu'il conserve la vidéo sur toute sa largeur. Vous devez activer flex-shrink pour que cela fonctionne.

.box-grow {
  flex: 1 1 auto; /* formerly flex: 1 0 auto; */
  background: green;
  padding: 5px;
  margin: 5px;
  overflow: auto; /* new */
}

.my-box {
  height: 300px;
  width: 600px;
  background: red;
  padding: 5px;
}
.content-box {
  background: blue;
}
.col {
  display: flex;
  flex-direction: column;
  justify-content: space-between
}
.box-shrink {
  flex: 0 1 auto;
  background: green;
  padding: 5px;
  margin: 5px;
}
.box-grow {
  flex: 1 1 auto; /* formerly flex: 1 0 auto; */
  background: green;
  padding: 5px;
  margin: 5px;
  overflow: auto; /* new */
}
video {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  display: block;
}
<div class="my-box col">
  <div class="box-shrink">
    small sized static content
  </div>
  <div class="content-box box-grow">
    <video controls>
      <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
    </video>
  </div>
  <div class="box-shrink">
    small sized static content
  </div>
</div>

Les deux solutions sont expliquées plus en détail ici:

29
Michael_B

Comme vous l'avez dit, le contenu (une vidéo dans ce cas) peut rétrécir et les barres de défilement sont autorisées. Que diriez-vous de mettre overflow:auto; sur le .box-grow classe et ensemble flex-shrink: 1; comme, flex: 1 1 auto; Ou si vous définissez le flex: 1 1 100%; la vidéo sera centrée sur le .box-grow classe aussi overflow:auto sera nécessaire.

.my-box {
    height: 300px;
    width: 600px;
    background: red;
    padding: 5px;
}

.content-box {
    background: blue;
            
}

.col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}

.box-shrink {
    flex: 0 1 auto;
    background: green;
    padding: 5px;
    margin: 5px;
}

.box-grow {
    flex: 1 1 auto;  /* Set the shrik 1 which is by default */
    background: green;
    padding: 5px;
    margin: 5px; 
    overflow:auto; /* Overflow will be needed if you set flex:1 1 100%*/
}

video {
    max-height: 100%;
    max-width: 100%;
    margin: auto;
    display: block;
}
<div class="my-box col">
    <div class="box-shrink">
        small sized static content
    </div>
    <div class="content-box box-grow">
        <video controls>
            <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
        </video>
    </div>
    <div class="box-shrink">
        small sized static content
    </div>
</div>
1
Mostafa Baezid