I'm happy to open a PR with this workaround if you agree it is a acceptable for this situation. Align items is-align-items-flex-end, align-items: flex-end is-align-items-center, align-items: center is-align-items-baseline, align-items: baseline is. 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. 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. The CSS3 flexbox align-items property is used to set the flexible containers items vertically align when the items do not use all available space on the cross. 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)
