Flexbox 2栏有问题3项

Question

我正在尝试让我的flexbox物品正确包装，并且似乎无法按照我的需要来运作。我有几个部分（紫色，粉红色，蓝色），粉红色和蓝色的高度可能不同，因此很难为容器设置正确的高度。粉色通常身高较短，而蓝色通常较长，但可以很短。粉色永远不会像紫色那么高。 桌面上的布局，这不是我现在想要的样子：

我希望桌面看起来像这样：

“移动”布局看起来像这样正确：

我的代码当前为

    #container {   display: flex;flex-wrap: wrap;}
    #purple {flex: 0 0 25%; max-width: 25%; width: 25%}
    #pink {    flex: 0 0 75%; max-width: 75%;width: 75%}
    #blue {    flex: 0 0 75%; max-width: 75%;width: 75%}

<div id="container">
    <section id="purple"><img /></section>
    <section id="pink"><p>small content block</p></section>
    <section id="blue"><p>large content block</p></section>
    </div>

Answer 1

我看到您期望的视图适用于移动视图，并且您可以使用media-query进行桌面视图，

• 对于桌面视图，您需要使容器沿列方向流动，并应用max-height来包装容器项。

    @media only screen and (min-width: 768px){
            #container {   
            display: flex;
            flex-flow:column wrap;
            max-height:100vh;
          }
            #purple{
              height: 100vh;
              margin-right:15px;
            }
  
          }