Html 显示：flex-水平方向将两个元素转换为500px

我正在尝试对齐2个水平div。但出于某种原因，第二个div超出了内容范围

• #内容：宽度：500px
• #flex_容器：显示：flex
• #主要：100%
• 表：100%
• #边栏250px

我需要两个箱子：

首先）仅绿色表格100%（不在#内容之外）-侧边栏不存在

第二个）两个分区：表格和边栏水平放入500px（不在内容之外）

---

谢谢

如果我理解正确，您希望绿色的div（侧边栏）在桌子的右侧。 由于将包装器div（main div）声明为500px，并且将表声明为100%，因此该表将具有500px，而第二个div（侧栏）将在表上重叠，因为没有可用空间。 如果需要固定宽度，则必须分配包装器div（content）750px，然后分配表500px和侧栏250px。 如果您希望响应（基于屏幕维度），您还可以设置500px包装（或100%具有完整页面宽度）div，并为表设置70%和侧边栏设置30%或任何您想要的百分比。

*{
保证金：0；
填充：0；
}
#内容{
宽度：500px；
背景：红色；
保证金：0自动；
高度：100vh；
}
#内容#柔性容器{
显示器：flex；
位置：相对位置；
保证金：0；
}
桌子{
表布局：固定；
}
#内容#主要{
填充：20px；
颜色：#000；
背景：绿色；
位置：相对位置；
最大宽度：100%；
弹性：1；
溢出-x：自动；
}
#边栏{
最大宽度：250px；
最小宽度：250px；
填充：10px20px0；
背景：黄色；
}

#
标题
标题
标题
标题
标题
标题
标题
标题
标题
标题
标题
标题
1.
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
2.
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
3.
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
边栏

问题在于，您将

内容的
宽度设置为
500px
，而将
主
的
宽度设置为
100%
意味着它将占据其父级的所有宽度，即
500px
，溢出的
侧栏有一半的容器（
250px
）因此溢出您所能做的事情是有意义的。您可以将
内容的
宽度设置为
50%
，将
侧栏设置为
50%
，但是
侧栏中的内容将溢出，因此增加
内容的
宽度，如下所示


*{
保证金：0；
填充：0；
}
#内容{
宽度：700px；
背景：红色；
保证金：0自动；
高度：100vh；
}
#内容#柔性容器{
显示器：flex；
位置：相对位置；
保证金：0；
}
#内容#主要{
填充：20px；
颜色：#000；
背景：绿色；
位置：相对位置；
宽度：50%；
}
#边栏{
宽度：50%；
填充：10px20px0；
背景：黄色；
}

#
标题
标题
标题
标题
标题
标题
标题
标题
标题
标题
标题
标题
1.
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
2.
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
3.
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
边栏
Stackoverflow中的代码片段在#main div中有#侧栏，而JSFIDLE没有。它是什么？@FeKuLa您的问题解决了吗？
<div id="content">
    <div id="flex_container">
        <div id="main">
           <table class="table"></table>
           <div id="sidebar"></div>
        </div>
    </div>
 </div>