Html 如何防止内容物流出容器

我正在为我的博客开发一个WordPress响应主题。这就是主题的结构。所有内容都放在div“post”中

如何使div“post”中的所有元素从其容器中获取所有宽度。 图像、文本等元素显示良好，但来自YouTube视频、推特和facebook的嵌入代码在移动浏览器中看起来被裁剪了。 当前CSS代码为：

.container{
显示器：flex；
}
.内容区{
利润率：10px；
弹性：3；
顺序：1；
边界半径：3px；
}
.侧边栏{
利润率：10px；
弹性：1；
顺序：2；
}
.邮政{
背景色：#fbfb；
填充：10px；
边界半径：3px；
}
.后img{
宽度：100%；
}

当你提到Facebook、Twitter和YouTube时，听起来像是在嵌入

元素。如果是这样，下面这样的简单规则可以解决您的问题：

iframe { max-width: 100%!important; }

---

应该为块“post”中的每个元素添加样式。对于图片，我认为这是可以的

.post-img{
宽度：100%；
}
.post-iframe{
宽度：100%；
}
.邮政.其他{
宽度：100%；
}

如果这就是主题的全部内容，那么就需要做一些事情@例如，对于mobile view的媒体查询，您可以使用屏幕的所有宽度作为post元素，而不是使用边距、四舍五入框和侧边栏。另外，你说的“外观裁剪”是什么意思？你添加元素，并将其样式设置为100%宽度，这应该可以做到（不要设置高度，只设置宽度，高度会根据需要拉伸/收缩）。你不清楚你在问什么。YouTube嵌入、Twitter和Facebook小部件都是非常不同的东西。它可能与您的主题无关。抛出

！重要信息

styles在一个不清楚的问题上会导致令人沮丧的维护体验。