Set FlexGroup to grow: 1 to be more friendly with IE11 #315
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is more a bug that popped up in Kibana, then an EUI bug, but this makes usage a little more fault tolerant. IE11 has trouble with nesting flex groups. The 0% fix from #308 actually works as it should, but Kibana was using a wrapping
display: flexelement (to provide an href) aroundEuiFlexItemswhich caused the groups to not size correctly when nested.Applying a
flex-grow: 1to groups themselves fixes that issue and causes no harm to the functionality of our system. For IE11, it'll act as you'd expect, even if you happen to add some flexy wrappers around our components.I've tested this in every browser and also updated our docs to use a more rigorous nesting scenario (mostly wanted to make sure the bugfix didn't force growth against
<FlexItem>parents that hadgrow={false}