Can one flex column expand into the next column? - html

Question

Is it possible to have one div element overflow from the bottom of the first column to the top of the second? The current behaviour is that if the div is too large, it is placed wholly at the top of the second column (see picture below).
I would instead like to have the class-alchemist div begin under the background-acolyte div and then begin at the top of the second column when it becomes too large for the first column, so maybe advanced alchemy would be the first section to display at the top of column two?
I'm only using HTML and CSS currently so non-JavaScript answers would be ideal. However, I can use JS if necessary.
Currently the CSS I'm using for the div that hold's the columns is as below:
display: flex;
flex-flow: column wrap;
height: 1080px;

Answer 1

Because boxes in flex-box are entirely contained in the row, or column, in which they're placed they cannot 'flow' across to a new row, or column. Given your requirements here, I'd suggest using CSS multi-col layout, as follows:
/* CSS custom property for the number of columns: */
:root {
--columnCount: 3;
}
/* simple CSS reset to remove margins, and padding and
setting common styles on fonts and box-sizing: */
*,
::before,
::after {
box-sizing: border-box;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
margin: 0;
padding: 0;
}
/* the wrapping element containing the multiple-column element: */
main {
border: 1px solid #000;
margin-block: 1em;
margin-inline: auto;
padding: 0.5em;
/* specifying a preferred widht of 60viewport-width units, but
limiting maximum width to 1000px and minimum width to
20em: */
width: clamp(20em, 60vw, 1000px);
}
section {
/* columns property triggers multi-col layout, with
the number of specified columns, retrieved from
the --columnCount CSS custom property: */
columns: var(--columnCount);
/* as in grid and flex-box this defines the width
between adjacent columns; in multi-col there's
no 'row-gap' equivalent: */
gap: 0.5em;
}
h3 {
background-color: #030;
color: #fff;
/* using CSS logical properties to specify a margin
on the block-end edge of the element (the bottom
edge in left-to-right, top-to-bottom languages
such as English: */
margin-block-end: 1em;
text-indent: 0.5em;
}
article {
--borderColor: rebeccapurple;
/* the border is to show where each box is, in the
layout: */
border: 2px solid var(--borderColor);
/* forces the browser to render a complete border
around each 'block' of the element, even the
parts of it on different columns: */
box-decoration-break: clone;
}
article:nth-child(even) {
/* setting a vivid border-color for the even-numbered
<article> elements, in order to make the column-span
obvious: */
--borderColor: #f90;
}
article:not(:first-child) {
margin-block-start: 0.5em;
}
p {
margin-inline: auto;
width: 90%;
}
/* using #media to specify different column-counts at different
screen widths, by updating the --columnCount custom property: */
#media screen and (max-width: 1250px) {
:root {
--columnCount: 2;
}
}
#media screen and (max-width: 990px) {
:root {
--columnCount: 1;
}
}
<main>
<section>
<article>
<h3>Section 01</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas maecenas pharetra convallis posuere. Sed enim ut sem viverra aliquet eget sit amet. Malesuada pellentesque elit eget gravida cum sociis. Ac orci phasellus egestas tellus rutrum tellus. Risus viverra adipiscing at in tellus integer feugiat scelerisque. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Et malesuada fames ac turpis egestas maecenas pharetra convallis posuere. Orci dapibus ultrices in iaculis nunc. </p>
</article>
<article>
<h3>Section 02</h3>
<p>Orci phasellus egestas tellus rutrum tellus pellentesque. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus. Erat nam at lectus urna duis convallis convallis tellus. Habitant morbi tristique senectus et netus et malesuada. Proin nibh nisl condimentum id. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Vitae nunc sed velit dignissim sodales ut. Nunc vel risus commodo viverra maecenas accumsan. Purus viverra accumsan in nisl nisi. Sollicitudin tempor id eu nisl.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In pellentesque massa placerat duis ultricies lacus sed. Interdum posuere lorem ipsum dolor sit. Proin sagittis nisl rhoncus mattis rhoncus. Tortor aliquam nulla facilisi cras. Malesuada fames ac turpis egestas integer eget aliquet. Massa enim nec dui nunc. Viverra nam libero justo laoreet. Aenean pharetra magna ac placerat vestibulum lectus mauris. Varius duis at consectetur lorem donec massa sapien faucibus et. Sed tempus urna et pharetra pharetra. Urna duis convallis convallis tellus id. Viverra tellus in hac habitasse.</p>
</article>
<article>
<h3>Section 03</h3>
<p>Facilisis volutpat est velit egestas dui id ornare. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Faucibus ornare suspendisse sed nisi lacus sed viverra. Urna cursus eget nunc scelerisque viverra mauris in. Malesuada fames ac turpis egestas integer eget. At urna condimentum mattis pellentesque. Phasellus faucibus scelerisque eleifend donec pretium. Nunc non blandit massa enim nec dui nunc mattis enim. Massa tincidunt dui ut ornare. Lorem sed risus ultricies tristique nulla aliquet enim. Et netus et malesuada fames ac turpis egestas maecenas pharetra. At lectus urna duis convallis convallis tellus. Ut tellus elementum sagittis vitae et leo duis ut. Odio ut enim blandit volutpat maecenas volutpat. Integer enim neque volutpat ac. Id eu nisl nunc mi ipsum faucibus. Sed vulputate mi sit amet mauris commodo quis imperdiet. Sit amet nulla facilisi morbi tempus.</p>
</article>
</section>
</main>
Reference:
border.
box-decoration-break.
box-sizing.
clamp().
columns.
CSS Custom Properties.
font-size.
font-weight.
gap.
line-height.
margin.
margin-block.
margin-inline.
#media.
:nth-child().
padding.
padding-block.
padding-inline.
:root.
text-indent.
var().
width.
Bibliography:
"Basic Concepts of Multicol," Mozilla Developer Network.
"When And How To Use CSS Multi-Column Layout," Rachel Andrew, Smashing Magazine.