为什么Codepen中正常运行的Flex响应式双栏布局在自有网站无法生效？

你写的代码把@media媒体查询嵌套在了.flex-container类选择器内部，原生标准CSS不支持这种嵌套写法。

• 这套代码在Codepen能正常运行，是因为Codepen默认启用了CSS预处理管线（Sass/PostCSS），会自动把嵌套的媒体查询编译成浏览器可识别的平铺CSS规则，在后台完成了代码拆解转换。
• 当你把这段代码直接复制到自己网站的原生<style>标签里时，浏览器会直接把嵌套在选择器内部的@media块判定为无效代码整段丢弃。这就是你在Chrome Inspector里观察到display: flex不生效的直接原因——这段样式根本没被浏览器解析执行。

把嵌套的媒体查询调整为浏览器可识别的标准平铺结构，修改后的CSS部分如下：

.flex-container {
  gap: 10px;
}

@media (min-width: 56.25em){
  .flex-container {
    display: flex;
  }
}

.main-content {
  flex: 1;
  width: 100%;
}

.sidebar {
  flex: 1;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 比例适配 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

• 目前虽然部分现代浏览器开始试验性支持原生CSS嵌套语法，但在全版本兼容的生产环境场景下，直接写嵌套CSS很容易出现低版本浏览器的样式失效问题。
• 如果偏好嵌套写法的开发体验，可以在自己的站点开发流程中配置对应CSS构建工具，把嵌套代码编译为通用兼容的原生CSS后再上线，不要直接把带嵌套的源码放到页面内联样式中。

内容的提问来源于stack exchange，提问作者tim128er