快速概述
我目前正在处理一个页面，该页面总共有三列，从左到右依次为：
- 项目列表
- 代码详细信息
- 代码窗口
现在，Project List和Code Details各有一个max-width600px但应该在移动设备上100%，其中显示顺序将Code Details->Project List->Code Window并且在桌面上时，所有三个都应该适合页面。这是一项乏味的任务，但我快到了，我只是觉得我错过了一些东西。
另外，并不是说它与这篇文章完全相关，但我也在使用 Bootstrap 4，它可能会影响也可能不会影响解决方案的实施方式(目前我没有看到原因，但包括这个以防万一)。
问题
我需要默认折叠Project List和Code Details，当两者都折叠时，Code Window应该处于全宽。然后，如果显示Project List或Code Details，则Code Window应填充右侧的任何剩余空间。这类似于谷歌处理地图的方式。
我尝试了几种方法，我最接近的方法是为左两列创建一个容器，并将Project List和Code Details放在左边的容器中，然后Code Window的宽度为100%.
我在左侧容器以及Project List和Code Details上使用float: left(在孩子身上使用它可能是一个问题，但删除它并不能解决问题)，width: 100%在Code Widnow上。
html, body {
height: 100%;
overflow: hidden;
}
.main-content {
display: flex;
width: 100%;
}
.left-content {
float: left;
}
.right-content {
width: 100%;
background-color: #5c7;
}
.project-list {
max-width: 200px;
float: left;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: #f33;
}
.code-details {
max-width: 200px;
float: left;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: #37f;
}<div class="main-content">
<div class="left-content">
<div class="project-list">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
</div>
<div class="code-details">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
</div>
</div>
<div class="right-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
</div>
</div>通过此设置，左列相互重叠，而不是在桌面上并排堆叠。我希望它们在移动设备上重叠，但在桌面上不重叠。您可以在上面的示例中清楚地看到这种效果。
问题
如何保留填充剩余宽度的功能并防止重叠，同时从左侧堆叠div元素以在桌面上显示左侧面板？我可以稍后照顾移动友好，但我想我最终在这个问题上有了隧道视野。
可以通过对代码窗口元素应用flex-grow: 1来实现此目的。如果折叠项目列表、代码详细信息或两个代码窗口都将占用剩余空间。
使用媒体查询，您可以删除移动设备的display: flex和max-width: 200px属性，使其全宽。
.main-content {
display: flex;
}
.project-list {
background-color: #FF3333;
max-width: 200px;
}
.code-details {
background-color: #3377FF;
max-width: 200px;
}
.code-window {
background-color: #55CC77;
flex-grow: 1;
}<div class="main-content">
<div class="project-list">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
</div>
<div class="code-details">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
</div>
<div class="code-window">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
</div>
</div>.main-content {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
}
.main-content>div{
padding: 12px;
}
.project-list {
background-color: #F33;
}
.code-details {
background-color: #37F;
}
.code-window {
background-color: #5C7;
}<div class="main-content">
<div class="project-list">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
</div>
<div class="code-details">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
</div>
<div class="code-window">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
</div>
</div>