0

I want to achieve a multi-line flexbox container where element width can reduce if it's min-width is not reach to not let big whitespace when break line happen. Here is an example on which i'm working on : https://codepen.io/BaptisteG/pen/dyyQodR

.container {  
border: 5px solid rgb(111,41,97);
border-radius: .5em;
padding: 10px;
display: flex;
flex-wrap: wrap;
row-gap: 1em;
column-gap: 20px;
width: 500px;
}

.item {
 padding: 10px;
 background-color: rgba(111,41,97,.3);
 border: 2px solid rgba(111,41,97,.5);
 flex: 1 1 content;
 min-width: 100px;
 max-width: min-content;
 white-space:nowrap;
 overflow:hidden;
}

A sketch of what i want to achieve : sketch I don't want element size to be increase to complete whitespace

BaptisteG
  • 1
  • 1
  • So what is the element that will cause the break supposed to do. I'm unclear n what it is you are trying to achieve. The image doesn't really explain it. – Paulie_D Nov 15 '19 at 11:17
  • The element have to be reduce to fit and not let space between element and the container Except if min-width reach – BaptisteG Nov 19 '19 at 05:14
  • That's not possible with CSS. You need javascript. – Paulie_D Nov 19 '19 at 06:31

0 Answers0