제목을 어떻게 해야될지 모르겠다.
요약이 안되는데 장황하게 이야기하면 flex 사용시 방향을 열(column)로 했을 때 iOS 10버전대에서 해당 영역이 통으로 보이지 않을 수 있다.

flex-wrap: wrap을 사용시에도 문제가 되는 상황이 있을진 모르겠지만 나 같은 경우는 일단 행과 열의 방향을 바꾸는 flex-direction: column을 사용해서 문제가 된 사항인데,

결과적으로 알려진 버그였는데 iOS 10점대에서 display: flex사용시 min-width이 정상 작동하지 않는다. flex-basis로 조절해야된다는 내용인데..

이렇게 버그탓으로 마무리 지을 수 있을 줄 알았는데 확실한 해결법을 알았으니 우선 조치를 취했고 후 관련 정리를 하고자 조금 더 알아보니 내 잘못도 없다고 볼 수 없었다. 형태를 대충 요약하면…

<div class="wrapper">
  <div class="content">
    자유영역
  </div>
  <div class="footer">
    고정영역
  </div>
</div>

.wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    max-height: 95%;
    max-width: 63rem;

    .content {
        flex: 1;
        overflow: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .footer {
        height: 9rem;
    }
}

이런식으로 content 영역이 유연하게 높이가 변동되도록 처리하면서…

.wrapper {
    ...
    .content {
        flex: auto;
    }
    ...
}

flex-basis 값이 auto여야 하는데 flex에 1을 넣는 바람에 flex-basis값에 0이 들어가게 되었고,
iOS 10점대에서 아예 공간이 안잡히는 문제 발생했다. flex-direction이 column이 아니었으면 안보이는 문제까지 생기진 않았을테니 흔하게 겪는 일은 아닌 것 같다. 문제는 iOS 11이상과 안드로이드에서는 flex-basis가 0으로 잡혀도 문제가 없다.

flex-basis가 0일때 꼭 아무런 영역도 잡히지 않아야 되는것은 아니니 버그반 내잘못반 정도로 정리하면 될까.