div перемещается влево, хотя его содержимое мало

Question

Извините за название ... Я не знаю, как это выразить. Во всяком случае, у меня есть простая страница flex box, в которой мало контента. Проблема в планшете, если я касаюсь экрана, содержимое перемещается. На нем нет горизонтальной прокрутки, и я не вижу пустых пробелов. Поскольку нет никакого дополнительного контента для показа по горизонтали, я не хочу, чтобы он вообще двигался по горизонтали.

Экраны следуют:

Страница при загрузке полностью показана

Так как содержимое маленькое, я могу переместить div, спрятать его влево и снова потянуть назад.

То, что я ожидаю, - это элемент, который не перемещается, поскольку нет содержимого, чтобы перемещаться.

Мое отображение прямо из этого , кроме заголовка / нижнего колонтитула. Для удобства:

CSS:

*, *:before, *:after
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body
{
    width: 100%;
    height: 100%;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body
{
    background: #444444;

    color: #cccccc;
    font-size: 14px;
    /* Helvetica/Arial-based sans serif stack */
    font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.flexbox-parent
{
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */

    background: rgba(255, 255, 255, .1);
}

.flexbox-item
{
    padding: 0px;
}
.flexbox-item-grow
{
    flex: 1; /* same as flex: 1 1 auto; */
}


.flexbox-item.content
{
    background: rgba(0, 0, 255, .1);
}

.fill-area
{
    display: flex;
    flex-direction: row;

    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */

}
.fill-area-content
{
    background: rgba(0, 0, 0, .3);
    border: 1px solid #000000;

    /* Needed for when the area gets squished too far and there is content that can't be displayed */
    overflow: auto; 
}

HTML:

<div class="flexbox-parent">

  <div class="flexbox-item fill-area content flexbox-item-grow">
      <div class="fill-area-content flexbox-item-grow">
          Content 
          <br /><br />
          Emulates height 100% with a horizontal flexbox with stretch
          <br /><br />      
          Content continues
      </div>
  </div>

</div>