How to prevent contents from going outside it's container : I'm developing a wordpress Responsive theme for my blog. This is the structure of theme. All the content goes in the div "post".

 [![enter image description here][1]][1]                                                                      


  [1]: https://i.stack.imgur.com/sZ96d.png
How do I make all the elements in div "post" take all width from it's container. 
Elements like images, texts are displayed fine but embedded code from YouTube videos, tweets, and facebook looks cropped in the mobile browser.
The current CSS code is: 

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-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%;
    }

<!-- end snippet -->

