I was looking for a suggestion that shall we start using justify-content: flex-start/start instead of using justify-content: stretch in the long run. If we justify-content: stretch is same as justify-content: flex-start/start why we need justify-content: stretch ? and what are all the places we need justify-content: stretch ?
Please see the below Example of the recent bug in chrome:
I have reproduced the bug in the current chrome version 133.0.0.0 related to cs. The justify-content: stretch started stretching out the containers to fill the available space. But according to MDN docs - flex-grow property controls the stretching of the flex item.
The below css class flex-start-example shows how the justify-content: flex-start works . The second class flex-stretch-example starts stretching to fill the container but in before versions it works like flex-start.
I was looking forward that always using justify-content: flex-start/start; would be solution always or we have to wait for the bug to get fixed ?
.flex-start-example > ul { display: flex; justify-content: flex-start; gap: 25px;}.flex-stretch-example > ul { display: flex; justify-content: stretch; gap: 25px;}Ensure that you are viewing the below bug in the chrome 133.0.0.0 browser version.
.flex-start-example,.flex-stretch-example { outline-style: solid; padding: 5px; margin: 25px;}ul { list-style: none;}li { outline-style: solid; padding: 5px;}.flex-start-example>ul { display: flex; justify-content: flex-start; gap: 25px;}.flex-stretch-example>ul { display: flex; justify-content: stretch; gap: 25px;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="https://cdnjs.cloudflare.com/ajax/libs/bowser/2.11.0/bundled.js"></script></head><body><h1> Flex-start Example: </h1><div class="flex-start-example"><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></div><h1> Stretch Example: </h1><div class="flex-stretch-example"><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></div></body></html>