css flexbox 不在 iframe 中解释

Question

当我将内容放入 iframe 时，使用 flexbox 管理的 header 呈现不同。为什么 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 响应仿真正常:

这个 url inside iframe KO :

Answer 1

它是否在 iframe 中没有区别。真正的区别是容器的宽度。 iframe 非常小，因此 header 中的内容不太适合。尝试在 header 上添加 flex-wrap: wrap;。如果元素不能彼此相邻，至少这会将元素放在彼此之下。