I'm sure this has been answered somewhere but I can't seem to find it.
I want the text inside the 2 flexboxed divs to also be inside the 90vw width, but I also want the backgrounds not to be shortened.
Anyways, here is what I have right now.
.width {
width: 90vw;
margin: auto;
}
.container {
display: flex;
}
.top {
background-color: red;
}
.left {
background-color: yellow;
}
.right {
background-color: green;
}<div class="top">
<p class="width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
<div class="container width">
<div class="left">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
</div>