html - How to prevent contents from going outside its container -

i'm developing wordpress responsive theme blog. structure of theme. content goes in div "post".

how make elements in div "post" take width it's container. elements images, texts displayed fine embedded code youtube videos, tweets, , facebook looks cropped in mobile browser. current css code is:

.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%;  }

it sounds you're embedding <iframe> elements when mention facebook, twitter , youtube. if so, simple rule following solve problem:

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