如何将两个子div居中，其中每个div都有自己的宽度?例如，一个是内容区，另一个是侧边栏

Question

我是css的新手，提前感谢您的帮助。

我有一个父div，里面有两个子div。我希望它能让父div覆盖100%的窗口，然后让两个子div的组合宽度为最大宽度，并以父div为中心。

以下是我目前所拥有的：

.learnings-main-content > * {
display: flex;
justify-content: center;
flex-basis: 100%;
padding: 20px;
background-color: #ef972d;
}
#learnings-main-content-area1 {
/*left side where content will live*/
}
#learnings-main-content-area2 {
/*right side where content will live*/
}

谢谢你的帮助，这真的很痛苦，我相信这很简单。

Answer 1

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

.learnings-main-content {
height:100vh;
width:100vw;
display: flex;
}
#learnings-main-content-area1 {
background-color:red;
flex:1;
}
#learnings-main-content-area2 {
background-color:blue;
flex:1;
}

<div class="learnings-main-content">
<div id="learnings-main-content-area1">
sa
</div>
<div id ="learnings-main-content-area2">
sa
</div>
</div>

Answer 2

只需将您的CSS类.elearnings主要内容更改为以下示例：

.learnings-main-content {
display: flex;
justify-content: center;
flex-basis: 100%;
padding: 20px;
background-color: #ef972d;
}