Fieldset breaks layout in Edge, FF, Chrome but not IE11?

Question

If i run this in IE11 the fieldset stays at 300px width, but in Edge, FF and Chrome it just expands until it can fit the entire content is there any way to make this behave the same way in Edge, FF and Chrome as it does in IE11? (the idea here was that I define the LabelWidth with one class and the total width with one and the UI just adapts).

Note: if you remove the fieldset and legend it just works out of the box in all browsers, also if you replace the fieldset with a div it works?

I would prefer a solution that's css based with no modification to the html.

* {
  box-sizing: border-box;
}
.Width300 {
  width: 300px;
  padding: 5px;
}
fieldset {
  border: black 1px solid;
}
.Field {
  white-space: nowrap;
  min-height: 26px;
  padding: 1px 0;
}
label {
  float: left;
  display: inline-block;
}
input,
span {
  display: inline-block;
  width: 100%;
}
span {
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
}
.LabelSize100 .Field {
  margin-right: 100px;
}
.LabelSize100 label {
  width: 100px;
}

<div class="LabelSize100 Width300">
  <fieldset>
    <legend>Test</legend>
    <div class="Fields">
      <div class="Field">
        <label>test:</label>
        <input type="text" />
      </div>
      <div class="Field">
        <label>test:</label>
        <input type="text" />
      </div>
      <div class="Field">
        <label>test2:</label>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus velit.</span>
      </div>
    </div>
  </fieldset>
</div>

You are looking for something like [this](https://jsfiddle.net/ro558rg5/) ? — Alex Char, Dec 22 '15 at 13:41
@AlexChar I had to add `.LabelSize100 .Field { margin-right: 100px; }` but otherwise it seems to work, post it as a answer. if no better answer comes in a few days ill mark it as the answer! — Peter, Dec 22 '15 at 14:01
Check and update answer with an alternative to `margin-right`. — Alex Char, Dec 22 '15 at 14:10
@AlexChar what confuses me is why on earth does the `fieldset` break everything, what's so different between a `fieldset` and a `div`? — Peter, Dec 22 '15 at 14:16
I managed to get it to render the correct way in Edge and chrome by adding `min-width: 0;` to the `fieldset` apparently its set to `min-content` by default. — Peter, Dec 22 '15 at 14:33
I'm confused. What exactly are you trying to achieve? You want to cut off the bottom row of text? — Jacob, Dec 22 '15 at 19:51

Alex Char · Accepted Answer · 2015-12-22T14:33:50.630

Reading more carefully specs I think you can just add min-width: 0 to fieldset element:

* {
  box-sizing: border-box;
}
.Width300 {
  width: 300px;
  padding: 5px;
}
fieldset {
  border: black 1px solid;
  min-width: 0;
}
.Field {
  white-space: nowrap;
  min-height: 26px;
  padding: 1px 0;
}
label {
  float: left;
  display: inline-block;
}
input,
span {
  display: inline-block;
  width: 100%;
}
span {
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
}
.LabelSize100 .Field {
  margin-right: 100px;
}
.LabelSize100 label {
  width: 100px;
}

<div class="LabelSize100 Width300">
  <fieldset>
    <legend>Test</legend>
    <div class="Fields">
      <div class="Field">
        <label>test:</label>
        <input type="text" />
      </div>
      <div class="Field">
        <label>test:</label>
        <input type="text" />
      </div>
      <div class="Field">
        <label>test2:</label>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus velit.</span>
      </div>
    </div>
  </fieldset>
</div>

The funny thing is that you read Mozilla's spec but it doesn't work on Firefox :) — Peter, Dec 22 '15 at 14:36

score -1 · Answer 2 · answered Dec 22 '15 at 14:32

There are a few type errors here like using Fields instead of Field and you have more code than you need.

fieldset {
  border: black 1px solid;
  max-width: 300px;
}

.Field input, span {
  display: inline-block;
  width:80%;
}

.Field label {
  width: 20%;
}


table {
    border: 1px solid black;
    margin: 5px;
    max-width: 300px;
}

td input {
    width: 90%;
}

HTML

  <fieldset class="LabelSize100">
     <legend>Test</legend>
      <div class="Field">
        <label>test:</label>
        <input type="text" />
      </div>
      <div class="Field">
        <label>test:</label>
        <input type="text" />
      </div>
      <div class="Field">
        <label>test2:</label>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus velit.</span>
      </div>
  </fieldset>
<br><br>
<table>
<tbody>
    <tr>
        <td><label>test:</label></td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td><label>test:</label></td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td nowrap><label>test 2:</label></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus velit.</td>
    </tr>
</tbody>
</table>

I would suggest using a table.

I have the tags there for a reason even if they aren't needed for this example. and using a table for UI isn't recommended see http://stackoverflow.com/a/84986/58553 — Peter, Dec 22 '15 at 14:42
And you just ignored `I would preferred a solution that's css based with no modification to the html.` — Peter, Dec 22 '15 at 15:49
I didn't ignore anything. My solution works without changing the html. I was trying to give extra help. My apologies. By the way, did you try the solution before ragging on it? — Will, Dec 22 '15 at 15:55
I'm sorry but your solution first of doesn't work with pixels as mine does yours uses % and that's not what I'm after secondly it doesn't even come close to what I'm looking for.. https://jsfiddle.net/zempt095/1/ — Peter, Dec 23 '15 at 12:07

Fieldset breaks layout in Edge, FF, Chrome but not IE11?

2 Answers2