space-between doesn't work right when meet tag <br> in flex-items

[jacty]

I have built an page to denote this bug. please visit link

This is a flex bug on BR tags. The 【.container】 is a flex container, and 【.items】 is its sub-container, which is also a flex container too. When there are 【br】s in the 【.item】, the 【justify-content:space-between】 in 【.items】 doesn't work right. All the items will layout very closely. And I have checked all the browsers I have. IE11 is the only one works right. Neither Chrome v63 nor Firefox v57 work right. What if you remove the 【display:flex】 in the 【.container】, they all work right;

[garrettw]

Chrome and Firefox actually got this right. Even though .items is a <div>, which would normally be a block element and thus have an automatic width of 100%, being a child of a flex container makes the box shrink down to match the width of its contents and nothing more. Because of this, there are also other ways to achieve the effect you're wanting. Instead of removing display: flex from .container, try adding either width: 100% or flex: 1 to .items.

[jacty]

@garrettw yes, fixing it is easy. but I think it is also a bug of flexbox, so let's list it here.

[garrettw]

I'm telling you it's not a bug. Want proof? Read Mozilla's flexbox documentation - scroll down just a bit and look under the heading "The flex-basis property", where you'll find this:

If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare display: flex on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.

The "fix" I mentioned is the proper way to do what you want.

[jacty]

@garrettw uhm. I got it. According to the spec, Chrome and Firefox work right and IE may work wrong, right? In IE, the items' size are divided equally from the parent container whatever there are BR tags in the items or not.

[garrettw]

Yes. Interestingly enough, I think I may have stumbled across a bug somewhere as I'm testing this. As soon as I can identify the nature of the bug, I'll post it here and if it's new, I'll create a new issue for it.

[garrettw]

First, I'll explain what's happening. You've discovered Flexbug #15 -- on .items you have a left and right margin of auto, but IE is completely ignoring it. In Chrome and Firefox, if you remove that margin, you'll see them spread out like they do in IE.

The other thing I noticed is that Chrome and Firefox do collapse the .item elements around their content, ignoring the flex-basis you set to 220px. However, IE11 and Edge handle this correctly. This has already been reported in #223, so I'll work on fixing up that report so it can be approved.

[garrettw]

I think this issue can be closed now.