如何防止内容超出其容器

Question

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

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

.container{
	display: flex;
}
.content-area{
	margin: 10px;
	flex: 3;
	order: 1;
	border-radius: 3px;
}
.sidebar{
	margin: 10px;
	flex: 1;
	order: 2;
}
.post{
	background-color: #fbfbfb;
	padding: 10px;
	border-radius: 3px;
}
.post img{
 	width: 100%;
}

Answer 1

您应该为块“post”中的每个元素添加样式。对于图片，我认为没问题。

#include <stdio.h>
#include <math.h>

int main(void) {
    int i;
    int n = 5;
    double y = 0.5;
    double z = 0.3;
    double answer = 0;
    for (i = 0  ; i < n ; i++)
        answer += y * pow(z,i);

    printf("%f", answer);
    return 0;
}

如果你想要更漂亮的东西，你需要使用媒体查询，以适应最重要的设备。

Answer 2

当您提及Facebook，Twitter和YouTube时，听起来您正在嵌入<iframe>元素。如果是这样，像下面这样的简单规则可以解决您的问题：

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