1
votes

CSS - Comment éviter que la largeur du dernier élément d'une flexbox ne dépasse l'espace disponible?

Dans une flexbox, j'ai 2 éléments d'affilée qui ne sont pas enveloppés. Le premier a une largeur déterminée. Je veux que le deuxième élément prenne l'espace disponible donc j'utilise ceci:

flex: 1 1 100%;

Jusqu'à présent, aucun problème. Mais dans les pages où le deuxième élément contient des éléments supplémentaires, la largeur de l'élément augmente jusqu'à la largeur de son parent (puisque j'ai utilisé max-width: 100% dessus) qui sort du conteneur flexible. Si j'utilise wrap , l'élément passe à la ligne suivante, mais je ne veux pas les envelopper.

Voici donc mon problème: comment puis-je définir la largeur d'un élément à l'intérieur une flexbox pour être exactement égale à l'espace disponible? Ni plus, ni moins.

html css responsive-design flexbox

0 commentaires

4 Réponses :

-1
votes

La meilleure solution que j'ai trouvée jusqu'à présent était max-width: calc (100% - fixed_width_of_first_element px);

Plus d'informations sur calc .

1 commentaires

La solution utilisant calc fonctionnera, mais elle n'est pas du tout adaptative si la zone de gauche est volontairement redimensionnée. Utiliser flex: 0 0 300px sur la gauche avec flex: 1 1 auto sur la droite permettra une plus grande flexibilité à la fois si une nouvelle "zone latérale droite flexible" est ajoutée ou si le côté gauche change de largeur pour une raison quelconque.

5
votes

Si vous enveloppez les deux éléments avec un wrapper d'élément parent qui a display flex, vous pouvez définir la largeur des deux éléments internes par la propriété flex.

En utilisant flex: 0 0 200px sur le premier élément définit la largeur à 200px et flex: 1 1 auto le deuxième élément remplit l'espace restant.

Code en action

    <div class="parent-element">
    	<div class="first-element">first element</div>
    	<div class="second-element">
    		<div class="second-element-content">content in second column should now fit fine.. 
        	content in second column should now fit fine.. 
        	content in second column should now fit fine.. 
    		  content in second column should now fit fine.. 
        	content in second column should now fit fine..
        	content in second column should now fit fine..
        	content in second column should now fit fine..
            </div>
    	</div>
    <div>

.parent-element{
  display: flex;
}

.first-element{
  flex: 0 0 200px; 
  border: 1px solid red
}

.second-element{
  display:flex; 
  flex: 1 1 auto;
  border: 1px solid blue
}

.second-element-content{
  flex: 1 1 auto; 
  border: 1px solid black
}

0 commentaires

0
votes

Essayez de configurer le deuxième enfant pour qu'il grandisse et rétrécisse, et le premier enfant pour qu'il ne rétrécisse que (si vous le souhaitez).

changez .box - fixé à: flex: 0 1 300px code > si vous voulez qu'il rétrécisse quand il le peut. Vous pouvez également utiliser des valeurs

En fin de compte, si le contenu de la div violette ne peut plus rétrécir, il débordera, alors tenez-en compte simplement en a) en le faisant envelopper OU b) réduction du premier div

  
 

<div class="wrap">
    <div class="box box--fixed"></div>
    <div class="box">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, dolores animi ab perspiciatis tenetur quis alias illum soluta provident deserunt similique tempore minima consectetur, eaque exercitationem quas nihil nisi voluptates.
    </div>
</div>
.wrap {
    display: flex;
    flex-wrap: nowrap;
}

.box {
    flex: 1 1 auto;
    min-height: 200px;
    background-color: rebeccapurple;
}

.box--fixed {
    flex: 0 0 300px;
    // flex: 0 1 300px;
    background-color: #bada55;
}

0 commentaires

1
votes

Donnez flex: auto; à élément flexible , ce qui se traduit par:

<div class="flex">
<div class="flexible">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit ut tortor pretium viverra suspendisse. Mi tempus imperdiet nulla malesuada. Habitasse platea dictumst quisque sagittis purus sit. At urna condimentum mattis pellentesque id nibh tortor id aliquet. Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Pretium quam vulputate dignissim suspendisse in est. Libero nunc consequat interdum varius. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Nisl tincidunt eget nullam non. Turpis massa sed elementum tempus egestas sed sed risus pretium. Ut ornare lectus sit amet est placerat. Bibendum ut tristique et egestas quis ipsum. Augue ut lectus arcu bibendum at. Amet consectetur adipiscing elit duis. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Nisl purus in mollis nunc sed id semper risus. Ornare aenean euismod elementum nisi quis.
</div>
<div class="inflexible"></div>
</div>
<div class="flex">
<div class="flexible">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit ut tortor pretium viverra suspendisse. Mi tempus imperdiet nulla malesuada. Habitasse platea dictumst quisque sagittis purus sit. At urna condimentum mattis pellentesque id nibh tortor id aliquet. Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Pretium quam vulputate dignissim suspendisse in est. Libero nunc consequat interdum varius. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Nisl tincidunt eget nullam non. Turpis massa sed elementum tempus egestas sed sed risus pretium. Ut ornare lectus sit amet est placerat. Bibendum ut tristique et egestas quis ipsum. Augue ut lectus arcu bibendum at. Amet consectetur adipiscing elit duis. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Nisl purus in mollis nunc sed id semper risus. Ornare aenean euismod elementum nisi quis.
</div>
</div>
<div class="flex">
<div class="flexible"></div>
<div class="inflexible"><p>Arcu dictum varius duis at consectetur lorem donec massa sapien. Blandit turpis cursus in hac habitasse platea. Malesuada pellentesque elit eget gravida cum sociis. Massa id neque aliquam vestibulum morbi blandit. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Ac turpis egestas sed tempus urna et. Sed risus ultricies tristique nulla. Velit aliquet sagittis id consectetur. Sit amet luctus venenatis lectus magna. In dictum non consectetur a erat nam at lectus. Risus nullam eget felis eget. Quis lectus nulla at volutpat diam. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Ultricies leo integer malesuada nunc vel risus. Vitae auctor eu augue ut lectus arcu. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Pharetra sit amet aliquam id.

<p>Porta non pulvinar neque laoreet suspendisse interdum. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Ultrices in iaculis nunc sed augue lacus viverra. At imperdiet dui accumsan sit amet. Urna condimentum mattis pellentesque id nibh. Enim diam vulputate ut pharetra sit amet. Vel pharetra vel turpis nunc. Et ligula ullamcorper malesuada proin libero. Proin libero nunc consequat interdum varius sit. Nisi porta lorem mollis aliquam. Volutpat odio facilisis mauris sit amet massa. Arcu odio ut sem nulla pharetra diam. Gravida arcu ac tortor dignissim convallis aenean. Tellus cras adipiscing enim eu turpis. Risus pretium quam vulputate dignissim.</div>
</div>

0 commentaires