纯CSS如何让不可修改样式的-not-assignable-子元素占满item-wrapper父容器

存在符合要求的纯CSS实现方案，全程不需要定义或修改-not-assignable-类对应的样式规则，两种常用实现思路如下：

方案1：修改父容器为Grid布局（最省心，无需编写子元素样式） #

Grid 布局下如果只有1个子元素，子元素会默认自动拉伸占满父容器的全部可用宽高，只需要调整.item-wrapper的display属性即可：

.container {
  display: flex;
  border: 1px solid orange;
  height: 50px;
}

.item-wrapper {
  /* 把原有的flex改成grid即可 */
  display: grid;
  min-width: 100%;
  border: 1px solid green;
}

方案2：保留Flex布局，用通用子选择器设置拉伸 #

如果必须保留父容器的Flex布局，使用父容器的直接子元素通配选择器匹配内部元素即可，全程不会触碰-not-assignable-类：

.container {
  display: flex;
  border: 1px solid orange;
  height: 50px;
}

.item-wrapper {
  display: flex;
  min-width: 100%;
  border: 1px solid green;
}
/* 新增规则，匹配item-wrapper下所有直接子元素 */
.item-wrapper > * {
  flex-grow: 1;
}

Flex布局默认align-items: stretch，子元素高度已经会自动撑满父容器，新增的flex-grow:1会让子元素占满全部剩余宽度。

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