html - flex 元素缩小并隐藏其内容

Question

我正在尝试创建一个在其 2 个子项之间平均分配空间的 flexbox。我遇到的问题是，我最小化屏幕后，第一个 child 的内容被隐藏了。

参见:https://jsfiddle.net/jo6dj8ne/

Gif showing the problem

我希望 info-section div 的内容始终可见，但 map-section div 缩小并显示滚动条。

<div class="contact-container">
  <div class="info-section">
    ... some content (info-section is also a flexbox)
  </div>
  <div class="map-section"></div>
</div>

Answer 1

问题是设置 flex为 1，相当于将其设置为 1 1 0。当时我还不熟悉flex-grow , flex-shrink和 flex-basis CSS 属性，这就是我无法使其正常工作的原因。

设置后flex info-section 到 1 0 auto 它不再缩小并且其初始大小等于其内容的大小。

工作示例 here .