2

I have this layout (witch I can't currently change, maybe some small addition): codepen

html {
  min-height: 100%;
}

body {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100%;
}

main {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.flex {
  display: flex;
  padding: 0;
  margin: 0;
  position: relative;
}

main>.flex {
  width: 100%;
  flex-grow: 1;
  flex-shrink: 1;
}

.panel {
  margin: 8px;
  padding: 0;
  position: relative;
}

.panel>div:nth-child(1) {
  padding: 16px;
  margin-top: 0;
  position: relative;
}

.input {
  padding: 0;
  position: relative;
  display: inline-block;
  margin: 8px;
  min-width: 150px;
  background: red;
}

.textarea {
  margin: 8px;
  position: relative;
  display: block;
  min-width: 300px;
  background: red;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}
<main>
  <div class="flex flex-column">
    <div class="panel" style="flex-grow:1">
      <div>
        <div class="flex flex-row flex-wrap">
          <div class="flex flex-column" style="flex-grow:1">
            <div class="input"><input type="text"></div>
            <div class="input"><input type="text"></div>
            <div class="flex flex-row flex-wrap">
              <div class="input"><input type="text" value="This one"></div>
              <div class="input"><input type="text" value="and this one"></div>
            </div>
            <div class="input"><input type="text"></div>
            <div class="input"><input type="text"></div>
          </div>
          <div class="flex flex-column" style="flex-grow:1">
            <div class="textarea"><textarea></textarea></div>
            <div class="textarea"><textarea></textarea></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

The problem is occurring only in IE11, where the two inputs with the text in them don't wrap when the window get below a certain width. In chrome everything works fine.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Enrico Martelli
  • 21
  • 1
  • 3
  • https://github.com/philipwalton/flexbugs -- might find an answer here – sol Jul 18 '17 at 13:35
  • 1
    Flex content has trouble wrapping in IE11 (which is notorious for [***flexbugs***](https://github.com/philipwalton/flexbugs)). Normally, for items to wrap in IE11, you need to define the width of the container. It's often tricky, however, knowing which container(s). In your case, the target container was a level above the problem items: https://codepen.io/anon/pen/LLogdK – Michael Benjamin Jul 18 '17 at 13:54

0 Answers0