Flex-column collapse on iPad

Question

This question has been raised many times before but flex model has changed dramatically and I am still unable to find a working solution.

THE PROBLEM

When the flex direction of an object is set to column, the height of all objects collapse (i.e height:0)
The problem appears restricted to iProducts. As far as I can tell Flex works as expected in all browsers on desktop and on android.
The problem is not restricted to Safari as the issue is present on Chrome and Firefox when tested on an iPad (IOS 10.3.3).

This example demonstrates the issue. When width is less than 600px the rows switch to column and the issue will be present.

.InputRow,
.InputItem,
.InputWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.InputRow,
.InputItem {
  -ms-flex-flow: wrap;
  flex-flow: wrap;
}

.InputItem,
.InputWrap {
  -ms-flex: 1 1 0%;
  -webkit-box-flex: 1;
  flex: 1 1 0%;
}

.InputWrap {
  position: relative;
  -ms-flex-pack: end;
  -webkit-box-pack: end;
  justify-content: flex-end;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  margin: 0 10px 10px 0;
}

@media all and (max-width:600px) {
  .InputRow {
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -ms-flex-align: stretch;
    -webkit-box-align: stretch;
    align-items: stretch;
  }
}

.Bx {
  background: #b00;
  border: 5px solid #333;
}

<div class="InputRow">
  <div class="InputItem">
    <div class="InputWrap">
      <div class="Bx">Box 2</div>
    </div>
  </div>
  <div class="InputItem">
    <div class="InputWrap">
      <div class="Bx">Box 2</div>
    </div>
  </div>
</div>

<div class="InputRow">
  <div class="InputItem">
    <div class="InputWrap">
      <div class="Bx">ROW 2</div>
    </div>
  </div>
</div>

This could be an issue with the nesting structure I have setup here but as I said the issue is isolated.

Michael Benjamin · Answer 1 · 2017-09-14T18:23:22.927

1

You don't have any heights defined, either on containers or items.

Yet, you are telling items to use free space:

.InputItem,
.InputWrap {
  flex: 1 1 0%;
}

This rule breaks down to:

flex-grow: 1
flex-shrink: 1
flex-basis: 0%

The flex-grow: 1 rule may work fine on wider screens (flex-direction: row) because the containers are block level elements (i.e., width: 100%).

But on smaller screens (flex-direction: column), height is set (via flex-basis) to 0%, flex-grow: 1 has no extra space to work, and the containers height (unlike its width) defaults to auto (content height).

So I think the solution is to add height to the container or the items.

edited Sep 14 '17 at 18:23

answered Sep 14 '17 at 18:12

Michael Benjamin

346,931
104
581
701

Thanks @Michael_B This is a logical answer that target the issue at hand. Adding height creates the desired result however specifying a fixed height would undermine the purpose of "flex" box because I want the height to dynamically adjust to it's content as it does on other devices. – DreamTeK Sep 15 '17 at 08:21
1

Found the solution. It seems some genius has already created an outstanding answer here: https://stackoverflow.com/a/33644245/2120261 – DreamTeK Sep 15 '17 at 09:11

Flex-column collapse on iPad

1 Answers1