【发布时间】：2019-04-17 01:39:36
【问题描述】：
快速概览
我目前正在处理一个总共有三列的页面，从左到右依次是：
- 项目列表
- 代码详情
- 代码窗口
现在，Project List 和 Code Details 各有一个 max-width 600px，但在移动设备上应该是 100%，其中显示顺序为 Code Details -> Project List -> Code Window 和在桌面上时，所有三个都应该适合页面。这是一项乏味的任务，但我快到了，我只是觉得我错过了一些东西。
另外，并不是说它与这篇文章完全相关，但我也在使用 Bootstrap 4，它可能会或可能不会影响解决方案的实施方式（目前我没有看到原因，但包括这个以防万一)。
问题
我需要 Project List 和 Code Details 默认折叠，Code Window 应该在两者都折叠时全宽。然后，如果正在显示Project List 或Code Details，则Code Window 应填充右侧的任何剩余空间。这类似于 Google 过去处理 their maps 的方式。
我尝试了几种方法，最接近的方法是为左侧两列创建一个容器，并将 Project List 和 Code Details 放入左侧容器中，然后 Code Window 得到一个100% 的宽度。
我在左侧容器上使用float: left，Project List 和Code Details（在孩子身上使用它可能是个问题，但删除它并不能解决问题），width: 100% on 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 元素以在桌面上显示我的左侧面板时重叠？我可以稍后处理移动友好，但我想我最终在这个问题上看到了隧道。
【问题讨论】：
标签： html css bootstrap-4