在新的生产线上使用全宽度的Flexbox?

这里有两种情况

屏幕太小

1. 如果屏幕低于400px,我们可以接受目前的规则

2. 如果屏幕高于400px,但仍然太小,我们最终会遇到冲突的最大宽度

在不使用javascript的情况下,是否可以这样做?

它可以通过媒体查询来实现

@media only screen and (max-width: 600px) {
  .instructions { min-width: 100% }
}

也许你应该使用媒体查询?

@media (max-width: 400px) { 
  .interactions {
    max-width: 100%;
  }
}

你应该使用nowrap属性, flex wrap:wrap在内部div太小、nowrap不创建、代码保持在同一行时创建新行

.overlay {
    display: flex;
    flex-wrap: nowrap;

  }
  .mainContent {
    flex-grow: 1;
    flex-basis: auto;
    margin: 5px;
  }

  .interactions {
    flex-basis: auto;
    flex-grow: 1;
    max-width: 400px;
    margin: 5px; 
  }

你可以在这里找到文件 https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp

此外,您还可以在此处找到有关使用和浏览器兼容性的其他详细信息 https://caniuse.com/#search=flex-wrap

使用媒体查询在这里是一个挑战,因为问题发生的断点取决于柔性宽度的大小。

因此,更好的方法是在.mainContent上设置最小宽度,并对断点使用媒体查询,该断点是.mainContent的最小宽度和.interactions的最大宽度+边距的总和

.overlay {
    display: flex;
    flex-wrap: wrap;
    justify-content:stretch;
}
.mainContent {
    flex-grow: 1;
    flex-basis: auto;
    min-width:400px;
    margin: 5px;
}
.interactions {
    flex-basis: auto;
    flex-grow: 1;
    max-width:400px;
    margin: 5px; 
}
@media only screen and (max-width: 840px){
    .mainContent, .interactions{
        max-width:none;
        min-width:none;
    }
}

请参见此处的实际操作: https://jsfiddle.net/gnu12Lfs/