Родитель переполнения Flexbox в столбце / обтекании направления Flex, для дочерних элементов задана максимальная ширина

Question

У меня вопрос по поводу flexbox .

Если я установлю flex-direction на столбец и перенесу на родительский элемент, то установлю max-width на дочерних элементах, они не сжимаются на родительском усадке, но переполнение родителя. Разве это не какая-то ошибка браузера?

<div class="flex-parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.flex-parent{
  outline: red 1px solid;
  width: 50vw;
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content:space-between;
  & > div{
    outline: blue 1px solid;
    flex-basis: 150px;
    max-width:100px;
    width:100%;
    margin-right: 10px;
    &:last-of-type{
      margin-right:0;
    }
  }
}

https://codepen.io/anon/pen/ELXRRN

Answer 1

Если вы измените исходное значение width на 100px и измените значение max-width на 50% Я думаю, вы получите решение, которое ищете

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
 ::after {
  box-sizing: inherit;
}

.flex {
  outline: red 1px solid;
  margin: 1em auto width: 50vw;
  width:500px;
  margin:1em auto;
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
}

.flex.thin {
  width: 150px;
}

.flex>div {
  outline: blue 1px solid;
  flex-basis: 150px;
  width: 100px;
  max-width: 50%;
}

.flex>div:last-of-type {
  margin-right: 0;
}

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="flex thin">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Демонстрация Codepen