How can I normalize the implied minimum width of flex-items across the latest versions of major browsers

Question

Edit This may be close to a duplicate, but unfortunately the answer to that question does nothing for IE 11. IE is an implied requirement for a question asking for a cross-browser solution.

I've got a jsfiddle showing the issue.

The first .flex-container is closest to how things are built in my application. This renders "correctly" in chrome, but if you pull it up in IE 11, or Firefox ≈38 the inputs overflow the parent .flex-container.

This issue doesn't seem to listed among the known issues on caniuse.com. I can't directly attribute it to one of these flexbugs either.

Can somebody please shed some light on this inconsistency?

Here is an image of Chrome's rendering: enter image description here

and here is one from IE 11: enter image description here

I've tried paring the example down with the subsequent containers, and the inputs seem to be the problem. The exception is in the second Chrome container where the existence of the <label> element seems to throw off the width calculation slightly.

I really don't want to define widths on the immediate children of .flex-container if I don't have to. I'd like to use the simplicity of the flex-grow property so that I can add children at some later point.

Thanks.

Did you see the link to my jsfiddle? You can play around with it here: http://jsfiddle.net/bodine30/pgxy8f5x/ — bodine, Jul 16 '15 at 18:01

score 1 · Accepted Answer · edited May 23 '17 at 12:14

The problem is that the Flexbox module changes the initial value of min-width:

4.5 Implied Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.

Chrome hasn't implemented it yet, that's why it seems to work there.

On Firefox, you can fix it using How can I get FF 33.x Flexbox behavior in FF 34.x?

@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css';
@import 'http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css';
html {
  font-size: 62.5%;
}
body {
  font-family:"Segoe UI", "Open Sans", Arial, sans-serif;
  font-size: 1.4rem;
  line-height: 1.42857143;
  background-color: #424242;
}
* {
  box-sizing: border-box;
}
.flex-container, .input-group, .input-group-btn {
  display:flex;
}
.flex-container {
  width:600px;
  border: 1px solid red;
  padding: 1.6rem;
  margin: 1.6rem;
}
.flex-container > * + * {
  margin-left: 2.5rem;
}
label {
  margin-bottom: 5px;
  font-size: 1.8rem;
  color:white;
}
.form-control {
  flex-grow:1;
  height: 50px;
  padding: 0.6rem 12px;
  border:0 none;
  text-align:center;
}
.input-group-btn {
  flex-basis: 62px;
  flex-shrink:0;
}
.input-group-btn button.btn {
  flex-grow: 1;
  flex-shrink:0;
  border: 0 none
}
.input-group-btn > .btn {
  position: relative;
}
.form-control, .input-group-btn .btn {
  font-size: 2.4rem;
}
.input-group .input-group-btn > .btn {
  border-top: 0 none;
  border-bottom: 0 none;
}
.flex-item {
  background: white;
  height: 50px;
}
.flex-container > * {
  flex: 1 1 auto;
  min-width: 0;
}
.form-control {
  min-width: 0;
  max-width: 100%;
}

<div class="flex-container">
  <div class="form-group">
    <label class="control-label">Start Date</label>
    <div class="input-group date date-picker">
      <input class="form-control" type="text" placeholder="mm/dd/yy"/>
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">
          <i class="fa fa-calendar"></i>
        </button> 
      </span> 
    </div>
  </div>
  <div class="form-group">
    <label class="control-label">End Date</label>
    <div class="input-group date date-picker">
      <input class="form-control" type="text" placeholder="mm/dd/yy" /> 
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">
          <i class="fa fa-calendar"></i>
        </button> 
      </span> 
    </div>
  </div>
</div>
<div class="flex-container">
  <div class="form-group">
    <label class="control-label">Start Date</label>
    <input class="form-control" name="start-date" type="text" placeholder="mm/dd/yy" />
  </div>
  <div class="form-group">
    <label class="control-label">End Date</label>
    <input class="form-control" name="end-date" type="text" placeholder="mm/dd/yy" />
  </div>
</div>
<div class="flex-container">
  <input class="form-control" name="start-date" type="text" placeholder="mm/dd/yy" />
  <input class="form-control" name="end-date" type="text" placeholder="mm/dd/yy" />
</div>
<div class="flex-container">
  <div class="flex-item">asdf</div>
  <div class="flex-item">asdf</div>
</div>

However, IE needs other changes:

.flex-container > * {
  flex: 1; /* Use `flex-basis: 0%` instead of your `auto` */
}
.form-control {
  width: 100%;
}

@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css';
@import 'http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css';
html {
  font-size: 62.5%;
}
body {
  font-family:"Segoe UI", "Open Sans", Arial, sans-serif;
  font-size: 1.4rem;
  line-height: 1.42857143;
  background-color: #424242;
}
* {
  box-sizing: border-box;
}
.flex-container, .input-group, .input-group-btn {
  display:flex;
}
.flex-container {
  width:600px;
  border: 1px solid red;
  padding: 1.6rem;
  margin: 1.6rem;
}
.flex-container > * + * {
  margin-left: 2.5rem;
}
label {
  margin-bottom: 5px;
  font-size: 1.8rem;
  color:white;
}
.form-control {
  flex-grow:1;
  height: 50px;
  padding: 0.6rem 12px;
  border:0 none;
  text-align:center;
}
.input-group-btn {
  flex-basis: 62px;
  flex-shrink:0;
}
.input-group-btn button.btn {
  flex-grow: 1;
  flex-shrink:0;
  border: 0 none
}
.input-group-btn > .btn {
  position: relative;
}
.form-control, .input-group-btn .btn {
  font-size: 2.4rem;
}
.input-group .input-group-btn > .btn {
  border-top: 0 none;
  border-bottom: 0 none;
}
.flex-item {
  background: white;
  height: 50px;
}
.flex-container > * {
  flex: 1;
}
.form-control {
  min-width: 0;
  width: 100%;
}

<div class="flex-container">
  <div class="form-group">
    <label class="control-label">Start Date</label>
    <div class="input-group date date-picker">
      <input class="form-control" type="text" placeholder="mm/dd/yy"/>
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">
          <i class="fa fa-calendar"></i>
        </button> 
      </span> 
    </div>
  </div>
  <div class="form-group">
    <label class="control-label">End Date</label>
    <div class="input-group date date-picker">
      <input class="form-control" type="text" placeholder="mm/dd/yy" /> 
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">
          <i class="fa fa-calendar"></i>
        </button> 
      </span> 
    </div>
  </div>
</div>
<div class="flex-container">
  <div class="form-group">
    <label class="control-label">Start Date</label>
    <input class="form-control" name="start-date" type="text" placeholder="mm/dd/yy" />
  </div>
  <div class="form-group">
    <label class="control-label">End Date</label>
    <input class="form-control" name="end-date" type="text" placeholder="mm/dd/yy" />
  </div>
</div>
<div class="flex-container">
  <input class="form-control" name="start-date" type="text" placeholder="mm/dd/yy" />
  <input class="form-control" name="end-date" type="text" placeholder="mm/dd/yy" />
</div>
<div class="flex-container">
  <div class="flex-item">asdf</div>
  <div class="flex-item">asdf</div>
</div>

Thank you for your answer, but this seems to have no effect on IE. Any idea why? — bodine, Jul 20 '15 at 16:05
@bodine It seems the problem was with `flex-basis: auto` and form controls without explicit width, which could be a recursive definition. — Oriol, Jul 20 '15 at 17:24

How can I normalize the implied minimum width of flex-items across the latest versions of major browsers

1 Answers1