I'm using CSS columns because I'm in a situation where I need text to automatically overflow from column to column so that both columns always shake out to be about the same height.
The design asks for the left column to be 40vw and the right to be 60vw but I'm not sure this is possible due to the limitation of columns. I attempted setting the minimum column width to 40vw and then added a div at the end of the content that has 60vw. No such luck with this example.
Is it possible to set explicit, individual column widths when using CSS columns?
.virtual-cols {
columns: 40vw 2;
}
.widen {
background: red;
height: 2vmin;
width: 60vw;
}<div class="virtual-cols">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse orci purus, mollis eget tristique imperdiet, maximus sed purus. Curabitur tincidunt interdum est ut cursus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Nam eget mi sit amet velit porta congue a non augue. Quisque laoreet ultrices massa, sit amet facilisis eros dapibus eget. In ac tempor enim. In quis velit sit amet magna rhoncus eleifend nec eu metus. Etiam volutpat, neque id rutrum consequat, urna lorem ullamcorper mauris, in malesuada libero lectus vitae ex. Suspendisse ligula turpis, blandit id eros vel, aliquet iaculis quam. Nulla odio est, convallis vitae hendrerit vel, bibendum sit amet metus. Aenean tincidunt arcu sit amet magna porttitor venenatis. Aliquam non maximus massa. Phasellus rhoncus, sapien vitae hendrerit maximus, justo lorem dignissim velit, in varius leo ligula vel ante. Etiam cursus orci placerat diam feugiat dapibus. Nunc lectus tellus, luctus blandit odio nec, hendrerit hendrerit tellus.
Quisque congue est eu dolor accumsan, nec ornare ante pulvinar. Integer in convallis felis. Duis fringilla urna a dolor euismod condimentum. Vestibulum vulputate feugiat viverra. Fusce vestibulum id lacus quis tristique. Nullam eget ipsum eget magna lobortis vestibulum vitae at nunc. Aliquam vehicula ante arcu, eu auctor felis vulputate ut. Proin vel tellus ac ex convallis viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur molestie eros nunc, a ultrices risus posuere sit amet. Aliquam erat volutpat. Nam eget nunc tellus. Phasellus id leo id est porta tempus eget sed justo. Pellentesque ut varius ex. Quisque eu lacus at augue porta ullamcorper. Aenean pellentesque, ligula at iaculis volutpat, lacus arcu imperdiet nisl, in hendrerit magna dui a turpis.
Nam ac lobortis augue, eu varius arcu. Aenean varius justo arcu, vel aliquam erat consequat vel. Fusce et nisl augue. Suspendisse ullamcorper, enim non pretium laoreet, dui magna dignissim augue, ut efficitur quam quam et metus. Curabitur tristique nisl eu leo tincidunt dignissim. Fusce nec risus in tortor blandit cursus. Vestibulum lorem arcu, iaculis sed libero id, rutrum suscipit sem. Integer vehicula pulvinar mi. Etiam a ultrices odio, id fermentum nibh. Pellentesque lacinia tincidunt rhoncus. Curabitur lacus enim, euismod sed ultricies vitae, semper mollis eros. Nullam id enim ut velit ullamcorper vulputate. Praesent elit nulla, placerat porta ullamcorper sed, molestie eget purus. Aenean vel lacinia nisl, volutpat blandit massa. Aenean fermentum dui at faucibus vulputate. Maecenas rhoncus turpis sed fringilla scelerisque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia quam eu consectetur bibendum. Fusce sit amet quam non erat lacinia faucibus non dictum orci. Mauris at sapien sit amet nisi pulvinar convallis. Aenean lobortis nec nisi eu imperdiet. Quisque euismod accumsan mi non elementum. Pellentesque non faucibus risus. In euismod nisi vel nisl commodo tempus. Ut mattis at nisi interdum consectetur. Integer vestibulum dolor ipsum, vel ornare elit tempor at. Nunc risus ipsum, euismod et nulla et, auctor dapibus ligula. Aliquam et sapien porttitor, hendrerit metus a, egestas sapien.
Nulla at orci nec dolor convallis posuere. Nam sollicitudin euismod nibh sed placerat. Proin semper augue ut accumsan tristique. Proin ultrices vitae ligula a aliquam. Vestibulum porttitor pulvinar magna sit amet iaculis. Sed egestas tincidunt justo, cursus sodales massa ultrices ut. Etiam vel condimentum velit. Mauris feugiat tellus quis velit efficitur, quis eleifend est efficitur. Fusce enim turpis, congue a purus et, sagittis egestas dolor.
<div class="widen" />
</div>
