I'm happy to open a PR with this workaround if you agree it is a acceptable for this situation. In this case you can use the align-content property with the same values as. Microsoft issue: - this was closed as duplicate, but the duplicate mentioned is specifically for flex-direction: column, so I left a comment there with this info to see if they agree or I'm missing something. With a wrapped flex container you might have space to distribute on the cross axis. I've tested this workaround in chrome 59, safari 10, and FF 64, and IE11, it is only needed in IE11, but works with all tested browsers.Ĭodepen: (see comments in css, uncomment line called out to see workaround)
Workaround: Setting height to a value less then min-height fixes the align-items: center issue in IE11, but the container still sets its size based on min-height, effectively giving you the desired behavior. In our situation this was desired so that the child items can stack and increase the height if needed. uk-flex-center, Add this class to center flex items along the main axis.uk-flex-right, Add this class to align flex items to the right. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions. You can set height explicitly, but in some situations you want min-height not height. I believe this is related to flexbug 3, but I found the below workaround more useful in the scenario we encountered this bug.īug: Setting min-height breaks align-items: center in ie11.
0 kommentar(er)
