Dúvida com divs flex

Olá! Estou com um problema com div flex, onde esta recebe dados vindo de um banco de dados (pequenos textos). Vi um método aonde esta div se ajusta conforme o tamanho da tela, e aumenta conforme o conteúdo adicionado, porém está muito esquisito como mostra o link da figura. Gostaria que as divs dos doze meses exibam o seu conteúdo e permaneçam alinhadas.

/applications/core/interface/imageproxy/imageproxy.php?img=http://equipenovainfo.com.br/forum.jpg&key=ea4c1a4b821c9b463828b7b688274f6ac80b87f2e53f63e3c481d703da15d55a" width="1000" />

<div id="footer_programacao_geral">

 <div id="info_programacao_anual">

 <span class="titulo_info">Janeiro</span>

 <pre><span class="txt_justify"><?php foreach ($coletou as $dados){ echo utf8_encode($dados->janeiro);}?></span></pre>

 </div>
 ...
</div>

	estilo

#footer_programacao_geral{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	margin:15px 0px 20px 0px;
}
#info_programacao_anual{
	max-width: 100%;
	height: 100%; /*Alterar para 100%*/
	margin: auto 5px 15px 5px;
	border: solid 1px #ff6f63;
	box-shadow: #696969 0px 5px 4px;
	background-color: rgba(250, 246, 247, 0.85);
	text-align: justify;
}
.titulo_info{
	display: block;
	text-align: center;
	color: #fff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f85032+0,f16f5c+50,e73827+100 */
	background: #f85032; /* Old browsers */
	background: -moz-linear-gradient(left, #f85032 0%, #f16f5c 50%, #e73827 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #f85032 0%,#f16f5c 50%,#e73827 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #f85032 0%,#f16f5c 50%,#e73827 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=1 ); /* IE6-9 */
}
.txt_justify{
	display: block;
	padding: 3px;
	text-align: justify;
}