Closed philipwalton closed 6 years ago
Had similar problem on a project im doing. I had a UL flex container with space-between. Once the container width reached a certain width all elements jumped out of order with extreme spacing (as displayed in #128 ).
My styles were as follows
ul {
display: flex;
justify-content: space-between;
width: 100%;
}
li {
flex: 1;
max-width: 232px;
}
It seemed that the max-width was interfering with flex-basis and instead of honoring the max-width, the total difference between flex-basis and max-width on all flex-items were added to the flex-containers total width. meaning the container had 100% + 306px (3 * 102px);
By removing the max-width and using flex-basis for this setting it solved the issue in this case. Following styles were the result
ul {
display: flex;
justify-content: space-between;
width: 100%;
}
li {
flex: 0 1 232px;
}
Closes #128.