下面的flex布局可以工作，但是当我们减小器件宽度时（例如：Chrome开发工具，触摸设备模拟），它不会减少其宽度，也不会保持列居中，两侧都有白色边距。
为什么？为什么？
在下面的片段中不容易看到，但这里有一个现场演示：https://gget.it/isp6/test.html

html, body { padding: 0; margin: 0; height: 100%; }
.container { display: flex; align-items: center; flex-direction: column; width: 80%; height: 100%; background-color: #ccc; margin: auto; }
img { max-height: 100%; max-width: 100%; }
.top { width: 50%; background-color: #ddd; }
.middle { background-color: #aaa; }
.bottom { flex-grow: 1; background-color: white; }
.footer { background-color: #eee; }

<div class="container">
  <div class="top">
    <img src="https://placehold.co/3000x2000">
  </div>
  <div class="middle">
    middle
  </div>
  <div class="bottom">
    bottom (should fill space with white, so that footer is always sticky on bottom)
  </div>
  <div class="footer">
    footer
  </div>
</div>

注意：它已经是230px左右的宽度的情况。为什么？为什么？