在iframe中无法解释CSS Flexbox

Question

当我将内容放入iframe时，使用flexbox管理的标头具有不相同的渲染。为什么iframe内容不同？ https://codepen.io/lguigo/pen/JmKQEa

header {
            display: flex;
            justify-content: space-between;
            margin: 25px 10px 25px 10px;
            border-bottom: 25px solid #f2f2f2;
            padding-bottom: 25px;
        }

chrome响应仿真OK：

iframe KO中的此网址：

Answer 1

它是否在iframe中都没有区别。真正的区别是容器的宽度。 iframe非常小，因此标头中的内容并不适合。尝试在标题上添加flex-wrap: wrap;。如果元素不能彼此相邻，那么至少这将使元素彼此下方。