Flexbox, который идет на полную ширину, когда вынужден на новую линию?

Question

У меня есть два элемента div, расположенных рядом друг с другом с использованием следующего CSS:

.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; 
}

Когда ширина экрана становится слишком маленькой (т.е. .interactions больше не может поместиться), новая строка создается вкакие взаимодействия размещаются.

Что бы я хотел сделать, когда это произойдет, чтобы взаимодействия перешли на максимальную ширину: 100%, есть ли способ сделать это без использования JavaScript?

Answer 1

Использование медиазапросов является проблемой здесь, потому что точка останова, в которой возникает проблема, зависит от размера гибкой ширины .mainContent

Таким образом, лучшим подходом было бы иметь минимальную ширину для .mainContent и использовать медиазапрос для точки останова, которая представляет собой сумму минимальной ширины .mainContent и максимальной ширины .interactions + margins

.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/

Answer 2

Здесь есть две ситуации

экран становится слишком маленьким

1. если экран становится меньше 400px, у нас все в порядке с правилами

2. если экран выше 400px, но все еще слишком мал, мы получим конфликтующие max-widths

Есть ли способ сделать это без использования JavaScript?

Это может быть достигнуто с помощью медиа-запросов

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

Answer 3

Может быть, вы должны использовать медиа-запросы?

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

Answer 4

вы должны использовать свойство 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