div avec min-largeur croissante avec son contenu

Question

Je suis un apprenti auto CSS/HTML, excuses si ma question est stupide.

Je veux un div qui est 40% de largeur minimum avec son contenu justifié mais quand plus d'éléments seront ajoutés dans ce div sa largeur augmente en conséquence.

C'est ce que j'ai jusqu'à présent:

.hcontainerbutton { 
    display: flex; 
    width: 40%; 
    background-color: blue; 
    align-items: center; 
    justify-content: space-around; 
    right: 30%; 
    left: 30%; 
    position: absolute; 
    bottom: 0!important; 
} 

aussi bien avec width:40% ou min-width:40% la div ne pousse pas si j'ajouter des éléments dans ce

Answer 1

1. Wrap .hcontainerbutton dans un récipient et appliquer flexbox et height propriétés à elle. Cela peut être utilisé pour positionner .hcontainerbutton au lieu de position: absolute.

2. Ajouter min-width valeur à .hcontainerbutton

Vous pouvez tester cette mise en page en ajoutant et en retirer .content divs et l'affichage en plein écran.

body { 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    justify-content: center; 
 
    height: 100vh; 
 
} 
 

 
.hcontainerbutton { 
 
    min-width: 40%; 
 
    background-color: blue; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    margin-top: auto; 
 
} 
 

 
.content { 
 
    background: pink; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div class="container"> 
 
    <div class="hcontainerbutton"> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
    </div> 
 
</div>

Answer 2

Selon vos besoins, cela peut être fait avec le CSS normal lui-même, vous ne devez pas aller pour le flex, voici une explication sur ce qui est fait.

Tout d'abord, nous définissons la largeur et la hauteur des balises html et body, puis en utilisant margin:0px, supprimez les marges définies par le navigateur.

html, 
body { 
    width: 100% height: auto; 
    margin: 0px; 
} 

Maintenant, le parent qui envelopper la div centrée devra avoir la propriété CSS text-align:center, essentiellement ce que cela fait est, il Centrer les éléments avec la propriété d'affichage inline-block.

.parent { 
    text-align: center; 
} 

ensuite venir à la div principale, qui a la classe hcontainerbutton, nous pouvons définir la max-width (dans l'exemple que j'utilise 40%) et min-width (dans l'exemple que j'utilise 80%) pour tout ce qui est nécessaire. La propriété CSS display:inline-block garantit qu'il prend seul la largeur du contenu. La propriété CSS word-wrap:break-word garantit que le texte est rompu et conserve la largeur de la div.

Vous trouverez ci-dessous un extrait fonctionnel du code.

html, 
 
body { 
 
    width: 100% height: auto; 
 
    margin: 0px; 
 
} 
 

 
.parent { 
 
    text-align: center; 
 
} 
 

 
.hcontainerbutton { 
 
    word-wrap: break-word; 
 
    min-width: 40%; 
 
    max-width: 80%; 
 
    display: inline-block; 
 
}

<div class="parent"> 
 
    <div class="hcontainerbutton"> asdf 
 
    </div> 
 
    <div class="hcontainerbutton"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eleifend magna augue. Morbi sagittis eu urna et facilisis. Nam finibus erat justo, vel porta magna aliquam a. Pellentesque faucibus molestie libero vitae condimentum. Nunc condimentum tincidunt 
 
    nulla, id suscipit magna dignissim id. Nulla dapibus suscipit velit et viverra. Mauris non gravida justo. Sed efficitur eleifend elementum. Integer non mattis mi. Etiam vestibulum viverra erat, eget dapibus tellus iaculis ut. Mauris ullamcorper magna 
 
    sapien, ac gravida odio blandit varius. Fusce eu placerat enim. Etiam nec elementum dui. In fermentum massa sed augue interdum aliquam. Nunc lacinia blandit elit a iaculis. 
 
    </div> 
 
</div>