1. 当父级div设置flex时，子级div宽度200px无效

1. 问题描述

如果父级容器设置了 display: flex;，子级 <div> 设置了固定的宽度（如 width: 200px;），在某些情况下，可能会导致子级的宽度不起作用。

这是因为 Flexbox 布局的特性之一是，它会根据内容和布局规则自动调整子元素的宽度。当你为子元素设置了固定的宽度时，Flexbox 布局会尽量保持子元素的宽度与父级容器的宽度相匹配，从而导致设置的宽度可能不起作用。

如果你希望子级 <div> 的宽度固定为 200px，可以考虑使用 flex: none; 或 flex-shrink: 0; 属性来禁止子元素缩小。

更新后的 CSS 代码如下：

.parent {
  display: flex;
}

.child1 {
  flex: none; /* 或 flex-shrink: 0; */
  width: 200px;
  background-color: #f1f1f1;
}

.child2 {
  background-color: #e1e1e1;
}

通过添加 flex: none; 或 flex-shrink: 0; 到 .child1 的样式中，可以确保它不会缩小以适应父级容器，从而使宽度设置为 200px 生效。.child2 仍然会根据 Flexbox 布局自动调整宽度。

这样，父级容器使用 Flexbox 布局，同时子级 <div> 的宽度设置为 200px 将生效，并与另一个子级 <div> 共同撑开父级内容。