Question posted in 
I cannot apply justify-content: space-between to “DIV1”, the div containing all the items in the column.
I have tried to change the height of DIV1 and any of its parent containers to 100%.
I have tried to set the positioning of DIV1 and the “ARTICLE_#” elements to both relative and absolute.
I have tried to set flex-grow: 0 to all the article elements.
I have tried to remove overflows. (This was because when I have set the positioning of the ARTICLE items to relative, the space-between works, but there is an ARTICLE sized gap between all articles. This test I have done on the live version of the page only:
https://utopistlist.com/renowned-nomads-vagabonds-and-hobos/
There if you try to set:
.related .lome.tg-item {
position: relative !important;
}
the space-between works, but with article size gaps between articles.
This is not the original code since the elements were exported from my site from dynamic into static version, so the selectors have changed.
I have changed the height of the column from the original 5786px (live page) to 7786px, because otherwise there would have been no place left for the alignment in the extracted code for showcasing.
https://codepen.io/any_formless/pen/JjPXdQY
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://rawcdn.githack.com/internetwiki/examplecss/d85cd8dbe31678dc4f9786693a82614592dd0a12/example.css" media="screen" />
</head>
<div id="DIV_1">
<!-- The Grid item #1 -->
<article id="ARTICLE_2">
<div id="DIV_3">
<div id="DIV_4">
<div id="DIV_5">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/healthy_and_cheap_eats-1-min-1024x1024.png" id="IMG_6" />
</div>
<div id="DIV_7">
</div>
<div id="DIV_8">
<div id="DIV_9">
<div id="DIV_10">
<a href=" /healthy-and-cheap-eats/" id="A_11"></a><span id="SPAN_12">January 12, 2018</span>
<h2 id="H2_13">
<a href=" /healthy-and-cheap-eats/" id="A_14">healthy and cheap eats</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #2 -->
<article id="ARTICLE_15">
<div id="DIV_16">
<div id="DIV_17">
<div id="DIV_18">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy6.jpg" id="IMG_19" />
</div>
<div id="DIV_20">
</div>
<div id="DIV_21">
<div id="DIV_22">
<div id="DIV_23">
<a href="#" id="A_24"></a><span id="SPAN_25">August 9, 2019</span>
<h2 id="H2_26">
<a href="#" id="A_27">⠀⠀⠀⠀⠀⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #3 -->
<article id="ARTICLE_28">
<div id="DIV_29">
<div id="DIV_30">
<div id="DIV_31">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/robyn_davidson-min-1-1024x1024.png" id="IMG_32" />
</div>
<div id="DIV_33">
</div>
<div id="DIV_34">
<div id="DIV_35">
<div id="DIV_36">
<a href=" /female-explorers-and-travelers/" id="A_37"></a><span id="SPAN_38">January 4, 2018</span>
<h2 id="H2_39">
<a href=" /female-explorers-and-travelers/" id="A_40">woman explorers and travelers</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #4 -->
<article id="ARTICLE_41">
<div id="DIV_42">
<div id="DIV_43">
<div id="DIV_44">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy5.jpg" id="IMG_45" />
</div>
<div id="DIV_46">
</div>
<div id="DIV_47">
<div id="DIV_48">
<div id="DIV_49">
<a href="#" id="A_50"></a><span id="SPAN_51">August 9, 2019</span>
<h2 id="H2_52">
<a href="#" id="A_53">⠀⠀⠀⠀⠀⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #5 -->
<article id="ARTICLE_54">
<div id="DIV_55">
<div id="DIV_56">
<div id="DIV_57">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/franz_degenhardt-min-1-1-1024x1024.png" id="IMG_58" />
</div>
<div id="DIV_59">
</div>
<div id="DIV_60">
<div id="DIV_61">
<div id="DIV_62">
<a href=" /left-wing-musicians/" id="A_63"></a><span id="SPAN_64">January 15, 2018</span>
<h2 id="H2_65">
<a href=" /left-wing-musicians/" id="A_66">left-wing musicians</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #6 -->
<article id="ARTICLE_67">
<div id="DIV_68">
<div id="DIV_69">
<div id="DIV_70">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy3.jpg" id="IMG_71" />
</div>
<div id="DIV_72">
</div>
<div id="DIV_73">
<div id="DIV_74">
<div id="DIV_75">
<a href="#" id="A_76"></a><span id="SPAN_77">August 9, 2019</span>
<h2 id="H2_78">
<a href="#" id="A_79">⠀⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #7 -->
<article id="ARTICLE_80">
<div id="DIV_81">
<div id="DIV_82">
<div id="DIV_83">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/beingliberal-min-min-1024x1024.png" id="IMG_84" />
</div>
<div id="DIV_85">
</div>
<div id="DIV_86">
<div id="DIV_87">
<div id="DIV_88">
<a href=" /online-liberal-journals/" id="A_89"></a><span id="SPAN_90">January 5, 2018</span>
<h2 id="H2_91">
<a href=" /online-liberal-journals/" id="A_92">online liberal journals</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #8 -->
<article id="ARTICLE_93">
<div id="DIV_94">
<div id="DIV_95">
<div id="DIV_96">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy4.jpg" id="IMG_97" />
</div>
<div id="DIV_98">
</div>
<div id="DIV_99">
<div id="DIV_100">
<div id="DIV_101">
<a href="#" id="A_102"></a><span id="SPAN_103">August 9, 2019</span>
<h2 id="H2_104">
<a href="#" id="A_105">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #9 -->
<article id="ARTICLE_106">
<div id="DIV_107">
<div id="DIV_108">
<div id="DIV_109">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2017/12/slavojzizek-min-2-min-1-1024x1024.png" id="IMG_110" />
</div>
<div id="DIV_111">
</div>
<div id="DIV_112">
<div id="DIV_113">
<div id="DIV_114">
<a href=" /left-wing-philosophers/" id="A_115"></a><span id="SPAN_116">December 30, 2017</span>
<h2 id="H2_117">
<a href=" /left-wing-philosophers/" id="A_118">left-wing philosophers</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #10 -->
<article id="ARTICLE_119">
<div id="DIV_120">
<div id="DIV_121">
<div id="DIV_122">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy2.jpg" id="IMG_123" />
</div>
<div id="DIV_124">
</div>
<div id="DIV_125">
<div id="DIV_126">
<div id="DIV_127">
<a href="#" id="A_128"></a><span id="SPAN_129">August 9, 2019</span>
<h2 id="H2_130">
<a href="#" id="A_131">⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #11 -->
<article id="ARTICLE_132">
<div id="DIV_133">
<div id="DIV_134">
<div id="DIV_135">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2017/12/rogerscruton-min-1-min-1-1024x1024.png" id="IMG_136" />
</div>
<div id="DIV_137">
</div>
<div id="DIV_138">
<div id="DIV_139">
<div id="DIV_140">
<a href=" /right-wing-philosophers/" id="A_141"></a><span id="SPAN_142">December 30, 2017</span>
<h2 id="H2_143">
<a href=" /right-wing-philosophers/" id="A_144">right-wing thinkers</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #12 -->
<article id="ARTICLE_145">
<div id="DIV_146">
<div id="DIV_147">
<div id="DIV_148">
<img alt="" width="485" height="485" src=" /wp-content/uploads/2019/08/squarestudy1.jpg" id="IMG_149" />
</div>
<div id="DIV_150">
</div>
<div id="DIV_151">
<div id="DIV_152">
<div id="DIV_153">
<a href="#" id="A_154"></a><span id="SPAN_155">August 9, 2019</span>
<h2 id="H2_156">
<a href="#" id="A_157">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #13 -->
<article id="ARTICLE_158">
<div id="DIV_159">
<div id="DIV_160">
<div id="DIV_161">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/grigoriperelman-min-min-1024x1024.png" id="IMG_162" />
</div>
<div id="DIV_163">
</div>
<div id="DIV_164">
<div id="DIV_165">
<div id="DIV_166">
<a href=" /people-who-lived-alone-for-decades/" id="A_167"></a><span id="SPAN_168">January 6, 2018</span>
<h2 id="H2_169">
<a href=" /people-who-lived-alone-for-decades/" id="A_170">notable recluses</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #14 -->
<article id="ARTICLE_171">
<div id="DIV_172">
<div id="DIV_173">
<div id="DIV_174">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy7.jpg" id="IMG_175" />
</div>
<div id="DIV_176">
</div>
<div id="DIV_177">
<div id="DIV_178">
<div id="DIV_179">
<a href="#" id="A_180"></a><span id="SPAN_181">August 9, 2019</span>
<h2 id="H2_182">
<a href="#" id="A_183">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #15 -->
<article id="ARTICLE_184">
<div id="DIV_185">
<div id="DIV_186">
<div id="DIV_187">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2017/12/heartofglassfilm-min-1-min-1-1024x1024.png" id="IMG_188" />
</div>
<div id="DIV_189">
</div>
<div id="DIV_190">
<div id="DIV_191">
<div id="DIV_192">
<a href=" /art-house-films/" id="A_193"></a><span id="SPAN_194">December 30, 2017</span>
<h2 id="H2_195">
<a href=" /art-house-films/" id="A_196">art-house films</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #16 -->
<article id="ARTICLE_197">
<div id="DIV_198">
<div id="DIV_199">
<div id="DIV_200">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy8.jpg" id="IMG_201" />
</div>
<div id="DIV_202">
</div>
<div id="DIV_203">
<div id="DIV_204">
<div id="DIV_205">
<a href="#" id="A_206"></a><span id="SPAN_207">August 11, 2019</span>
<h2 id="H2_208">
<a href="#" id="A_209">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #17 -->
<article id="ARTICLE_210">
<div id="DIV_211">
<div id="DIV_212">
<div id="DIV_213">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/adamgreen-min-min-1-1024x1024.png" id="IMG_214" />
</div>
<div id="DIV_215">
</div>
<div id="DIV_216">
<div id="DIV_217">
<div id="DIV_218">
<a href=" /distinct-musicians/" id="A_219"></a><span id="SPAN_220">January 3, 2018</span>
<h2 id="H2_221">
<a href=" /distinct-musicians/" id="A_222">distinct musicians</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #18 -->
<article id="ARTICLE_223">
<div id="DIV_224">
<div id="DIV_225">
<div id="DIV_226">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy9.jpg" id="IMG_227" />
</div>
<div id="DIV_228">
</div>
<div id="DIV_229">
<div id="DIV_230">
<div id="DIV_231">
<a href="#" id="A_232"></a><span id="SPAN_233">August 11, 2019</span>
<h2 id="H2_234">
<a href="#" id="A_235">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #19 -->
<article id="ARTICLE_236">
<div id="DIV_237">
<div id="DIV_238">
<div id="DIV_239">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/munchausentrilemma-min-min-1-1024x1024.png" id="IMG_240" />
</div>
<div id="DIV_241">
</div>
<div id="DIV_242">
<div id="DIV_243">
<div id="DIV_244">
<a href=" /unsolved-problems-in-philosophy/" id="A_245"></a><span id="SPAN_246">January 4, 2018</span>
<h2 id="H2_247">
<a href=" /unsolved-problems-in-philosophy/" id="A_248">unsolved problems in philosophy</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #20 -->
<article id="ARTICLE_249">
<div id="DIV_250">
<div id="DIV_251">
<div id="DIV_252">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy10.jpg" id="IMG_253" />
</div>
<div id="DIV_254">
</div>
<div id="DIV_255">
<div id="DIV_256">
<div id="DIV_257">
<a href="#" id="A_258"></a><span id="SPAN_259">August 11, 2019</span>
<h2 id="H2_260">
<a href="#" id="A_261">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #21 -->
<article id="ARTICLE_262">
<div id="DIV_263">
<div id="DIV_264">
<div id="DIV_265">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/friedrichnietsche-min-min-1-2-1024x1024.png" id="IMG_266" />
</div>
<div id="DIV_267">
</div>
<div id="DIV_268">
<div id="DIV_269">
<div id="DIV_270">
<a href=" /atheist-philosophers/" id="A_271"></a><span id="SPAN_272">January 6, 2018</span>
<h2 id="H2_273">
<a href=" /atheist-philosophers/" id="A_274">atheist philosophers</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #22 -->
<article id="ARTICLE_275">
<div id="DIV_276">
<div id="DIV_277">
<div id="DIV_278">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy11.jpg" id="IMG_279" />
</div>
<div id="DIV_280">
</div>
<div id="DIV_281">
<div id="DIV_282">
<div id="DIV_283">
<a href="#" id="A_284"></a><span id="SPAN_285">August 11, 2019</span>
<h2 id="H2_286">
<a href="#" id="A_287">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #23 -->
<article id="ARTICLE_288">
<div id="DIV_289">
<div id="DIV_290">
<div id="DIV_291">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/thebluebrainproject-min-min-1-1024x1024.png" id="IMG_292" />
</div>
<div id="DIV_293">
</div>
<div id="DIV_294">
<div id="DIV_295">
<div id="DIV_296">
<a href=" /brain-inspired-artificial-intelligence-projects/" id="A_297"></a><span id="SPAN_298">January 6, 2018</span>
<h2 id="H2_299">
<a href=" /brain-inspired-artificial-intelligence-projects/" id="A_300">artificial brain intelligence</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #24 -->
<article id="ARTICLE_301">
<div id="DIV_302">
<div id="DIV_303">
<div id="DIV_304">
<img alt="" width="500" height="501" src=" /wp-content/uploads/2019/08/squarestudy12.jpg" id="IMG_305" />
</div>
<div id="DIV_306">
</div>
<div id="DIV_307">
<div id="DIV_308">
<div id="DIV_309">
<a href="#" id="A_310"></a><span id="SPAN_311">August 11, 2019</span>
<h2 id="H2_312">
<a href="#" id="A_313">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #25 -->
<article id="ARTICLE_314">
<div id="DIV_315">
<div id="DIV_316">
<div id="DIV_317">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/blockchain-min-min-1-1024x1024.png" id="IMG_318" />
</div>
<div id="DIV_319">
</div>
<div id="DIV_320">
<div id="DIV_321">
<div id="DIV_322">
<a href=" /startups-with-decentralizing-technologies/" id="A_323"></a><span id="SPAN_324">January 8, 2018</span>
<h2 id="H2_325">
<a href=" /startups-with-decentralizing-technologies/" id="A_326">decentralizing technologies</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #26 -->
<article id="ARTICLE_327">
<div id="DIV_328">
<div id="DIV_329">
<div id="DIV_330">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy13.jpg" id="IMG_331" />
</div>
<div id="DIV_332">
</div>
<div id="DIV_333">
<div id="DIV_334">
<div id="DIV_335">
<a href="#" id="A_336"></a><span id="SPAN_337">August 11, 2019</span>
<h2 id="H2_338">
<a href="#" id="A_339">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #27 -->
<article id="ARTICLE_340">
<div id="DIV_341">
<div id="DIV_342">
<div id="DIV_343">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/means_of_non_violent_action-min-min-1-1024x1024.png" id="IMG_344" />
</div>
<div id="DIV_345">
</div>
<div id="DIV_346">
<div id="DIV_347">
<div id="DIV_348">
<a href=" /means-of-nonviolent-action/" id="A_349"></a><span id="SPAN_350">January 10, 2018</span>
<h2 id="H2_351">
<a href=" /means-of-nonviolent-action/" id="A_352">means of nonviolent action</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #28 -->
<article id="ARTICLE_353">
<div id="DIV_354">
<div id="DIV_355">
<div id="DIV_356">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/tiddlywiki-min-min-1024x1024.png" id="IMG_357" />
</div>
<div id="DIV_358">
</div>
<div id="DIV_359">
<div id="DIV_360">
<div id="DIV_361">
<a href=" /mind-mapping-tools/" id="A_362"></a><span id="SPAN_363">January 10, 2018</span>
<h2 id="H2_364">
<a href=" /mind-mapping-tools/" id="A_365">mind mapping tools</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</html>
2
Answers
I found the solution, one of the parent (grand-grand parent) containers was not at 100 % height. And since Stackoverflow only allows 30000 characters in the code field, I could not post the whole code with the many parent containers.
Justify-content doesn’t work as intended because every article you have is using position: absolute. When you use position: absolute, the position of the element only cares about the top, left, right, bottom attributes.
Also, you don’t need individual styling for each article, since each article looks the same.
Just have one class called .article and put all your styling there. Remove the positioning and let flexbox take care of it for you.
EDIT:
The OP’s solution is also part of the overall answer.
OP’s answer: