我不确定这个解决方案是否是最好的，因为我对container-type并不熟悉，但是将display: table添加到.container中似乎可以解决这个问题：

body {
  background: #2b2e36;
  color: white;
  font-size: 20px;
}

.container {
  container-type: inline-size;
  background-color: green;
  display: table;
}

.parent {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: #ffff0061;
}

.child {
  background-color: #ff000091;
}

<div class="parent">
  <div class="child">
    <div>First</div>
  </div>

  <div class="container">
    <div>Second</div>
  </div>
</div>

一种解决方法是将container-type属性与min-width属性交换，并在容器宽度低于最小值时使用@media查询来应用CSS样式。
示例：

.container {
  min-width: 300px;
}

@media (max-width: 299px) {
  .container {
    /* styles for when container width is less than 300px */
  }
}

此问题是由container类中的container-type属性引起的，因此删除它将修复此问题：

body {
  background: #2b2e36;
  color: white;
  font-size: 20px;
}

.parent {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: #ffff0061;
}

.child {
  background-color: #ff000091;
}

.container {
  background-color: green;
}

<div class="parent">
  <div class="child">
    <div>First</div>
  </div>

  <div class="container">
    <div>Second</div>
  </div>
</div>