philipwalton / flexbugs

A community-curated list of flexbox issues and cross-browser workarounds for them.
MIT License
13.63k stars 495 forks source link

Add flexbug 17 #244

Closed philipwalton closed 6 years ago

philipwalton commented 6 years ago

Closes #128.

clp-amsiq commented 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;
}