Might be a dumb ask.
This is what I have right now
Please expect that the height of 3 can change based on its content and the height of the right items 1, 2, 3 and so on, have varied heights. Is there any way that items 4 and below ( which are below 3 ) can occupy the full width of the container instead of limiting to the flex container?
I am trying to avoid anything programmatically and preferably using flex only.
div { font-size: 30px;}.firstDiv { background-color: red; height: 100px;}.secondDiv { background-color: gray; height: 100px;}.thirdDiv { background-color: green; height: 150px; flex: 1;}.fouthDiv { background-color: yellow; height: 100px;}<div style="display: flex; flex-direction: row;"><div style="display: flex; flex-direction: column; flex:2"><div class="firstDiv">1</div><div class="secondDiv">2</div><div class="fouthDiv">4</div></div><div class="thirdDiv">3</div></div>