Html Flexbox包装问题-在高度为100vh的容器中对齐相邻的两个可滚动div

我希望以下flex box布局能够：

当侧边栏和内容区的内容溢出时，可以单独滚动侧边栏和内容区

要显示在侧边栏旁边的内容区域

主容器的高度保持在100vh，侧栏或内容区都不应超过此高度

此警报用于提醒用户有关问题。它应该在顶部，并且应该占据宽度的100%

用户可以选择使用侧边栏。如果未使用侧边栏，内容将占据100%的宽度。警报也只会在出现问题时出现。如果没有，则不会显示警报

我不知道为什么

内容

区域出现在

侧栏

下方，而

侧栏

和

内容

区域即使溢出后也不会激活滚动。您可以看到

侧栏的高度超过
主容器的高度（主区域的背景色为青色）


.main{
显示器：flex；
柔性包装：包装；
高度：100vh；
背景：青色；
}
.main.警报{
弹性：1100%；
背景：黄色；
高度：30px；
顺序：-2；
}
.主要内容{
flex:1自动；
背景：蓝色；
溢出y：自动；
}
.main.侧边栏{
flex:0自动；
宽度：200px；
背景：红色；
溢出y：自动；
顺序：-1；
}

你好
内容。
Lorem ipsum dolor sit amet，奉献精英。包括腐败在内，不允许作为必要的自由原则和义务而再次发生，最低限度的责任是什么？
Lorem ipsum dolor sit amet，奉献精英。在非生命体a、rem和eligendi的情况下，大静脉应为排斥性静脉，并在非生命体a、rem和eligendi的情况下，在非生命体a、rem和eligendi的情况下，在非生命体a、rem和eligendi的情况下，视情况而定。
Lorem ipsum dolor sit amet，奉献精英。包括腐败在内，不允许作为必要的自由原则和义务而再次发生，最低限度的责任是什么？
Lorem ipsum dolor sit amet，奉献精英。在非生命体a、rem和eligendi的情况下，大静脉应为排斥性静脉，并在非生命体a、rem和eligendi的情况下，在非生命体a、rem和eligendi的情况下，在非生命体a、rem和eligendi的情况下，视情况而定。
Lorem ipsum dolor sit amet，奉献精英。包括腐败在内，不允许作为必要的自由原则和义务而再次发生，最低限度的责任是什么？
Lorem ipsum dolor sit amet，奉献精英。在非生命体a、rem和eligendi的情况下，大静脉应为排斥性静脉，并在非生命体a、rem和eligendi的情况下，在非生命体a、rem和eligendi的情况下，在非生命体a、rem和eligendi的情况下，视情况而定。
Lorem ipsum dolor sit amet，奉献精英。包括腐败在内，不允许作为必要的自由原则和义务而再次发生，最低限度的责任是什么？
Lorem ipsum dolor sit amet，奉献精英。在非生命体a、rem和eligendi的情况下，大静脉应为排斥性静脉，并在非生命体a、rem和eligendi的情况下，在非生命体a、rem和eligendi的情况下，在非生命体a、rem和eligendi的情况下，视情况而定。
Lorem ipsum dolor sit amet，奉献精英。明确地说，你是一个有区别的人，你是一个有选择的人。
Lorem ipsum dolor sit amet，奉献精英。在所有人的耳朵和身体的脸上都有明显的区别。
Lorem ipsum dolor sit amet，奉献精英。“最大限度地保护你的隐私，保护你的隐私，保护你的尊严。”。当然，多洛尔·哈拉姆·尼莫。
Lorem ipsum dolor sit amet，奉献精英。这是一种阻碍，一种自由，一种自由，一种自由，一种自由，一种自由，一种自由，一种自由，一种自由，一种自由，一种自由，一种自由，一种自由，一种自由，一种自由。Doloribus excepturi iure，hic准建筑师。
边栏
Lorem ipsum dolor sit amet，奉献精英。Natus，odit accusantium，maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero Temperate，iure，voluptatum facere ut saepe nam。借方炎。
Lorem ipsum dolor sit amet，奉献精英。这是一个非ipsam建筑设计师明确提出的要求。这是我的梦想，我的梦想！
Lorem ipsum dolor sit amet，奉献精英。包括腐败在内，不允许作为必要的自由原则和义务而再次发生，最低限度的责任是什么？
Lorem ipsum dolor sit amet，奉献精英。在非生命体a、rem和eligendi的情况下，大静脉应为排斥性静脉，并在非生命体a、rem和eligendi的情况下，在非生命体a、rem和eligendi的情况下，在非生命体a、rem和eligendi的情况下，视情况而定。
Lorem ipsum dolor sit amet，奉献精英。包括腐败在内，不允许作为必要的自由原则和义务而再次发生，最低限度的责任是什么？
Lorem ipsum dolor sit amet，奉献精英。在非生命体a、rem和eligendi的情况下，大静脉应为排斥性静脉，并在非生命体a、rem和eligendi的情况下，在非生命体a、rem和eligendi的情况下，在非生命体a、rem和eligendi的情况下，视情况而定。
Lorem ipsum dolor sit amet，奉献精英。包括腐败在内，不允许作为必要的自由原则和义务而再次发生，最低限度的责任是什么？
Lorem ipsum dolor sit amet，奉献精英。在非生命体a、rem和eligen中，大静脉的大小必须与排斥性静脉相匹配
.content{
    flex: 1 1 auto;
    background: blue;
    overflow-y: auto; */
    width: calc(100% - 200px); // Or use flex: 1 where you got flex: 1 1 auto;
    overflow-y: auto;
}

.main .sidebar {
    flex: 0 0 auto;
    width: 200px;
    background: red;
    overflow-y: auto;
    order: -1;
}

.wrapper{
    display:flex;
    flex-wrap:wrap;
}