Не работает max-width во вложенном flexbox

Question

Хотел во вложенных flexbox использовать max-width что бы легче организовать сжатие блоков, но max-width не сработал, хотя в не вложенном flexbox работает нормально.

.flex {
  display: flex;
  justify-content: space-between;
}

.item,
.flex {
  border: 1px solid;
}

.item1 {
  max-width: 120px;
  width: 100%;
}

.item2,
.item4 {
  margin-left: 20px;
}

.contents {
  display: contents;
}

.item2 {
  margin-right: auto;
}

<span>Во Вложенном flexbox  max-width в Item1 не сработал</span>
<div class="flex">
  <div class="nested flex">
    <div class="item1 item">
      Item1
    </div>
    <a class="item2 item">
        Item2
    </a>
  </div>
  <div class="nested2 flex">
    <div class="item3 item">
      Item3
    </div>
    <a class="item4 item">
        Item4
    </a>
  </div>
</div>
<span>В не вложенном flexbox  max-width в Item1 сработал</span>
<div class="flex">
  <div class="nested contents">
    <div class="item1 item">
      Item1
    </div>
    <a class="item2 item">
        Item2
    </a>
  </div>
  <div class="nested2 contents">
    <div class="item3 item">
      Item3
    </div>
    <a class="item4 item">
        Item4
    </a>
  </div>
</div>

Пока обхожу проблему с помощью display:contents Как лучше реализовать резиновые блоки в других резиновых блоках с max-width?

Answer 1

max-width работает, как он должен. Он ограничивает ширину элемента, но не определяет её. Ваш элемент item1 растягивается на 100% ширины родителя. В первом случае родитель .nested занимает наименьшую ширину, так как сам являтся flex-элементом. если ему задать, например, flex-grow: 1 - он растянется и ваш item1 тоже растянется до 120px.

ps вообще, в целом я вашу общую задачу совсем не понял. И не совсем понимаю, чего вы в итоге хотите добиться?

.flex {
  display: flex;
  justify-content: space-between;
}

.item,
.flex {
  border: 1px solid;
}

.item1 {
  max-width: 120px;
  width: 100%;
}

.item2,
.item4 {
  margin-left: 20px;
}

.contents {
  display: contents;
}

.item2 {
  margin-right: auto;
}

.nested {
  flex-grow: 1;
}

<span>Во Вложенном flexbox  max-width в Item1 не сработал</span>
<div class="flex">
  <div class="nested flex">
    <div class="item1 item">
      Item1
    </div>
    <a class="item2 item">
        Item2
    </a>
  </div>
  <div class="nested2 flex">
    <div class="item3 item">
      Item3
    </div>
    <a class="item4 item">
        Item4
    </a>
  </div>
</div>
<span>В не вложенном flexbox  max-width в Item1 сработал</span>
<div class="flex">
  <div class="nested contents">
    <div class="item1 item">
      Item1
    </div>
    <a class="item2 item">
        Item2
    </a>
  </div>
  <div class="nested2 contents">
    <div class="item3 item">
      Item3
    </div>
    <a class="item4 item">
        Item4
    </a>
  </div>
</div>

БЛОГ НА HUSL

Не работает max-width во вложенном flexbox

Ответы (1 шт):