Flexbox在flex方向列/ wrap上溢出父级，子级设置为max-width

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%，我认为您可以获得所需的解决方案

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Codepen Demo