Javascript 当强制安装到新线上时，Flexbox会全宽吗？

我使用以下CSS将两个div并排排列：

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

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

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

当屏幕的宽度变得太小（即，交互无法再适应）时，将创建一个新行，在其中放置交互

---

当这种情况发生时，我想做的是让交互切换到最大宽度：100%，有没有不使用javascript的方法可以做到这一点？

您应该使用nowrap属性， flex wrap:wrap create新行当内部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; 
  }

您可以在这里找到文档

---

您还可以在此处找到有关使用和浏览器兼容性的其他详细信息这里有两种情况

屏幕变得太小

如果屏幕低于400px，到目前为止我们还可以接受规则

若屏幕高于400px，但仍然太小，我们最终会遇到最大宽度冲突

在不使用javascript的情况下，是否还有其他方法可以做到这一点

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

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

---

也许你应该使用媒体查询

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

---

使用媒体查询在这里是一个挑战，因为出现问题的断点取决于flexible width.mainContent的大小

因此，更好的方法是在.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;
    }
}

---

在这里查看它的实际操作：

向您展示html pleaseBTW，因为

flex wrap:wrap：你发布的CSS已经是这样了——有什么问题吗？每当内容不合适时，
.interactions
元素就会在自己的行上结束，占据父框的整个宽度。@amn“当出现这种情况时，我想做的是让交互切换到最大宽度：100%，有没有不使用javascript的方法可以做到这一点？”我仍然不明白<代码>.interactions

将占用flex容器的整个宽度，当使用CSS包装在自己的行上时。问题是什么？不幸的是，这适用于窗口宽度而不是元素宽度。请粘贴您的所有代码，也许我可以帮您更多。@tweetypi如果您在问题中谈到屏幕大小，此解决方案应该可以解决您的问题。如果没有，请重写您的问题并包含所有代码，以便我们可以更好地了解问题。不幸的是，这适用于窗口宽度，而不是元素宽度