Flex嵌套布局实现固定200px列+自适应列X轴滚动的问题求解

• 父容器.container未设置display: flex，flex布局规则不会生效，两个子元素默认作为块级元素上下排列，无法实现两列并排效果
• .container-time设置了flex: 0 0 auto，该属性表示元素宽度由自身内容决定，不会自动填充父容器的剩余宽度，不符合第二列占满剩余空间的要求
• 滚动属性配置错误：overflow-x: auto设置在了内层的.element上，且外层.container-time没有做宽度限制，会被超长内容无限撑开，无法触发横向滚动
• 未给弹性项设置防撑开配置：flex布局下子项默认min-width: auto，会被内容强制撑开宽度，就算设置了flex: 1也可能失效

HTML #

如果是普通HTML场景，将className替换为class即可

<section className="container">
  <div className="container-name">1</div>
  <div className="container-time">
    <div className="element">
      222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222999999
    </div>
  </div>
</section>

CSS #

.container {
  /* 开启flex布局 */
  display: flex;
}

.container-name {
  /* 固定宽度200px，禁止压缩 */
  flex: 0 0 200px;
  border: 1px dotted;
}

.container-time {
  /* 占满剩余宽度 */
  flex: 1;
  /* 内容超出时横向滚动 */
  overflow-x: auto;
  border: 1px solid;
  /* 防止被内容撑开，兼容旧版浏览器 */
  min-width: 0;
}

.element {
  /* 内容不换行，保证超长内容在一行显示 */
  white-space: nowrap;
}

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