div的绝对定位，同时保持页面布局

Question

我正在为我的网站构建一个分为两列的博客页面。第1列.col_1(红色(为固定宽度，第2列.col_2(蓝色(占据剩余空间。第2列包含一个富文本块.rich_text(绿色(，所有博客标题、文本和内容都包含在最大宽度内。

我希望.rich_text块中的所有表都延伸到.rich_text的左右边界之外，并接触到.page_body的边缘，以便它们拉伸.page_body的整个宽度。我可以通过设置position: absolute; left: 0px; right: 0px;来达到这个效果，如.table_container_abs所示，但这也导致.rich_text中的表重叠内容，因为它具有绝对的定位。

请参阅我当前页面布局的嵌入示例如果需要，不使用JS，如何将这些表扩展到.page_body的边缘，同时保持它们与富文本块中其他元素的交互

.page_body {
width: 100%;
display: flex;
position: relative
}
.col_1 {
width: 100px;
flex-grow: 1;
background-color: #FFC9C9
}
.col_2 {
flex-grow: 3;
background-color: #C9DEFF
}
.rich_text {
max-width: 300px;
background-color: #F0FFFA
}
.table_container {
width: 100%;
height: 100px;
color: white;
background-color: #656565
}
.table_container_abs {
left: 0px;
right: 0px;
position: absolute;
height: 100px;
color: white;
background-color: #656565
}

<div class='page_body'>
<div class='col_1'>Post navigation</div>
<div class='col_2'>
<div class='rich_text'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
<div class='table_container'>Table</div>
<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
<br>
<div class='table_container_abs'>Absolute table</div>
</div>
</div>
</div>

Answer 1

使用绝对位置属性无法实现无文本重叠，但可以通过以下步骤实现您想要的：

1-将table_container_absdiv移动到col_2之外，并成为page_bodydiv的最后一个直接子级。

2-赋予table_container_abs类flex: 0 0 100%;属性，并删除绝对位置、顶部和左侧属性。

3-给page_body类flex-wrap: wrap;，以便父级将包含的框包装在其中。

通过这种方式，您可以避免盒子重叠，尽情享受吧！