Почему не учитывается ширина контейнера если у дочернего элемента не задана ширина?

Question

[winbackgo]

Имеем две колонки фиксированной ширины и одна которая занимает остальное пространство. Вот что происходит если вставить контент шире колонки. Как это исправить?

Надо чтобы работало как так же, как если задать ширину.

Comments

[RAX7]

.content{
  overflow-x: auto;  //либо hidden
}

почему так происходит сам не понял

[winbackgo]

RAX7, это я знаю, но не считаю корректным

Answer 1

[AlexKeller]

.main > .content
добавить правило
min-width: 0;
https://jsfiddle.net/z5eLt8w9/1/

Comments

[winbackgo]

Да, действительно сработало

[Ankhena]

winbackgo, а теперь вставьте туда блоки с цифрами и flex-wrap из примеров в комментариях

Answer 2

[Alexander]

А почему вы средней колонке не хотите задавать размер?
Если у вас левая колонка 120px, правая 240px, то средней можно задать width: calc(100% - 360px); и все будет нормально. И не надо в "резиновый" блок вставлять блоки с жестко заданной шириной, это по крайней мере не логично, ведь он должен сжиматься при ресайзе.

Comments

[winbackgo]

Как вариант решения подойдет, но есть ряд неудобств:
* если требуется отобразить страницу без левого или правого блока, нужно использовать дополнительные классы чтобы задать новый calc.
* Всегда нужно пересчитывать значение в calc если менять ширину колонок.

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

Это к делу не относится. Ситуации разные бывают, в данном конкретном случае мне нужен блок с вертикальной прокруткой.

[Alexander]

winbackgo, если не подходит calc, то можно сделать flex: auto; и он будет заполнять свободное пространство.

Это к делу не относится. Ситуации разные бывают, в данном конкретном случае мне нужен блок с вертикальной прокруткой.

Как не относится?) если у вас ширина окна будет 500, а у блока ширина 700 задана это норм?) Какая связь между шириной и вертикальной прокруткой?)
Что бы сделать блок с вертикальной прокруткой, можно задать ему высоту например 500px и overflow: auto; и тогда если высота контента в блоке будет больше чем 500px, то будет вертикальная прокрутка.

[winbackgo]

Alexander, flex auto не работает.
Такой пример более наглядный?

В случае с calaс все корректно

[Alexander]

Вот так все работает. И вам нужен был блок с горизонтальной прокруткой, а не вертикальной как вы написали).
А иначе никак, вы либо задаете ширину блоку, либо обрезаете лишнее overflow: hidden; либо делаете прокрутку overflow: auto;

*, ::after, ::before {
    box-sizing: border-box;
}

.header {
  height: 60px;
  padding: 15px;
  background-color: #eee;
  margin-bottom: 15px;
}

.header,
.main {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.main {
  display: flex;
  min-height: 200px;
  
  > .content {
    padding: 0 15px;
    order:2;
    flex: 1 1 auto;
    border-width: 0 1px;
    border-style: solid;
    overflow: auto;
    //max-width: calc(100% - 360px);
  }
  
  > .left {
    flex: 0 0 120px;
    min-width: 120px;
    order: 1;
    background-color: #eee;
  }
  
  > .right {
    flex: 0 0 240px;
    min-width: 240px;
    order: 3;
    background-color: #eee;
  }
}

.container {
  border: 1px solid;
  
  &-in {
    display: flex;
    flex-wrap: nowrap;
    
    .item {
      min-width: 100px;
      min-height: 100px;
     //padding: 15px;
      font-size: 25px;
      line-height: 100px;
      text-align: center;
      
    }
  }
}