DateTimePicker layout problem in IE 11

[robert-lindstrom]

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

Please specify what version of the library you are using: [latest]

Expected / Desired Behavior / Question

The time row of the DateTimePicker should stay within its area

Observed Behavior

The time row of the DateTimePicker overflows in IE 11 (se picture) due to issues with flexbox layout.

Steps to Reproduce

Put two DateTimePickers next to each other in a grid and check layout using IE 11:

<div className="ms-Grid-row">
  <div className="ms-Grid-col ms-lg6">
    <DateTimePicker label="DateTime Picker without seconds" showSeconds={false} onChange={(value) => console.log("DateTimePicker value:", value)} />
  </div>
  <div className="ms-Grid-col ms-lg6">
    <DateTimePicker label="DateTime Picker with seconds" showSeconds={true} onChange={(value) => console.log("DateTimePicker value:", value)} />
  </div>
</div>

Thanks!

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[estruyf]

Thanks @robert-lindstrom for reporting and fixing this.

[estruyf]

This has just been released in version 1.13.2