Flexbox one long and short columns - html

Question

I'm trying to implement a layout like this:
On a narrower screen it look like this:
here is my code so far:
.cont {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
}
.cell{
border: 2px solid black;
}
.cell-1 {
flex-basis: 100%;
width: 70%;
margin-right: 25px;
}
.cell-2,
.cell-3 {
width: 30%;
}
#media (max-width: 1000px) {
.cont{
flex-wrap: nowrap;
}
.cell {
width: 100%;
}
.cell-1, .cell-2, cell-3 {
width: 100%;
}
.cell-1 {
order: 2;
}
.cell-2 {
order: 1;
}
.cell-3 {
order: 3;
}
<div class="cont">
<div class="cell cell-1">
<h2>One</h2>
</div>
<div class="cell cell-2">
<h2>Two</h2>
</div>
<div class="cell cell-3">
<h2>Three</h2>
</div>
</div>
The problem is that I need to set height to the .cont in order for columns to wrap in a widescreen mode, and I can't do that due to the variable content size. For example if I had only 2 small paragraphs in cell-1 and a height of 500px that would lead to footer being too far below from .cont. Or if I had to many content in cell-1 and a height: 500px, it would lead to content inside .cont go under footer.
What would you suggest to solve this problem?
codepen

Answer 1

You can "easily" achieve it with grid:
.cont {
display: grid;
grid-template: 'content side-1' 'content side-2';
grid-template-columns: 7fr 3fr;
grid-column-gap: 1em;
}
.cell-1 {
grid-area: content;
}
.cell-2 {
grid-area: side-1;
}
.cell-3 {
grid-area: side-2;
}
#media(max-width: 768px) {
.cont {
grid-template: 'side-1' 'content' 'side-2'
}
}
<div class="cont">
<div class="cell cell-1">
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc. Ut pharetra sit amet aliquam id diam maecenas. Nunc eget lorem dolor sed viverra. Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
<p>Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
</div>
<div class="cell cell-2">
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc.
</div>
<div class="cell cell-3">
<h2>Three</h2>
<p>Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.
</div>
</div>