Putting an img & a span in a div

[nilufertek316]

I simply want to put an image and a text under it in a child div, but somehow the spans stay outside the divs. Are the flex boxes causing these mess (im kinda new through these stuff)??
here are my css and html:

* {box-sizing: border-box}

body,html{
	margin:0;
	padding:0;
	height:100%;
	font-size:20px;
	font-family:helvetica,arial;
	}
	
.menu {background-color:#666666;
min-height:3em;
    position:sticky;
    top:0;
    z-index:1;}
	
.wrapper{
	max-width:1200px;
    margin:auto;}
	
.content{
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	background-color:#efe8ff;
	min-height:100%;
    margin:0;
	padding:1em;
	justify-content:space-evenly;}
	

.child{
	display:flex;
	flex-float:wrap-column;
	width: 20em;
	height:30em;
	border:1px solid black;
	margin:1em;
}
.child img{
	display:block;
   max-width: 100%; 
	height:85%;
	}
	
.child span{
	display:block;
	width:100%;
	height:15%;
	border:1px solid red;
}

.footer {
    min-height:5em;  
    background-color:#1c1c1c;}

<div class="menu"></div>


<div class="wrapper">
	
	<div class="content">
	
		<div class="child">
		<img src="resim.jpg">
		<span>some text</span>
		</div>
		
		<div class="child">
		<img src="resim.jpg">
		<span>some text</span>
		</div>
		
		<div class="child">
		<img src="resim.jpg">
		<span>some text</span>
		</div>
		
		<div class="child">
		<img src="resim.jpg">
		<span>some text</span>
		</div>
		
		<div class="child">
		<img src="resim.jpg">
		<span>some text</span>
		</div>
	
	</div>
	
	<div class="footer"></div>
	

</div>

[Ray.H]

Hi, you have an error with your .child rules.
Change flex-float:wrap-column; to flex-flow:column wrap

.child{
	display:flex;
	flex-flow:column wrap;
	width: 20em;
	height:30em;
	border:1px solid black;
	margin:1em;
}

[nilufertek316]

wow,thanks. what a silly mistake