/*
https://stackoverflow.com/questions/48440188/how-to-set-div-height-depending-on-screen-height-minus-the-height-of-an-absolute

e.g.
<div class="flex_vertical_container">
    <div class="flex_child_fill_empty">
    </div>

    <div class="flex_sticky_child_wrap_content">
    </div>
</div>

*/

.flex_vertical_container {	
	height:100%;

display: -webkit-box;  /* iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* Firefox 19 */
display: -ms-flexbox;      /* IE 10 */
display: -webkit-flex;     /* Chrome Safari 6.1+. iOS 7.1+, BB10 */
display: flex;

d_isplay: inline-flex; /* ?? Safari not working ?? */

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

 /* ?? stop growing > 100% */
}

/* ---------------------------------------------------------- */
.flex_child_fill_empty {
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -webkit-flex; /* ? to fix Safari */
	display: -ms-flexbox; /* IE 10 */
	display: flex; /* ? to fix Safari */

    -webkit-flex-basis: 0; /* Safari 6.1+ */
    flex-basis: 0;

	-webkit-flex-shrink: 1; /* Safari 6.1+ */
    flex-shrink: 1;

	-webkit-flex-grow: 1; /* Safari 6.1+ */
    flex-grow: 1;

	min-height: 0;
	min-width: 0;
}

.flex_sticky_child_shrink_content {
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -webkit-flex; /* ? to fix Safari */
	display: -ms-flexbox; /* IE 10 */
	display: flex; 

	-webkit-flex-basis: auto; /* Safari 6.1+ */
    flex-basis: auto;
	-webkit-flex-shrink: 1; /* Safari 6.1+ */
    flex-shrink: 1;
	-webkit-flex-grow: 0; /* Safari 6.1+ */
    flex-grow: 0;
	min-height: 0;
	min-width: 0;
/*	height: auto;  debug: fix safari not shrinking */
}

.flex_vertical_container > .flex_child_fill_empty {
    height: 100%;
}

.flex_horizontal_container > .flex_child_fill_empty {
    width: 100%;
}

.flex_sticky_child_shrink_content.option_space_above {
	margin-top: auto;
margin-bottom: 0;
}


/* ---------------------------------------------------------- */
/* expands to wrap content */
.flex_sticky_child_wrap_content {
	d_isplay: flex; /* ? to fix Safari */
	-webkit-flex-basis: auto; /* Safari 6.1+ */
    flex-basis: auto;
	-webkit-flex-shrink: 0; /* Safari 6.1+ */
    flex-shrink: 0;
	-webkit-flex-grow: 0; /* Safari 6.1+ */
    flex-grow: 0;
	min-height: 0;
}

.flex_vertical_container >  .flex_sticky_child_wrap_content {
	margin-top: 0;		/* remove vertical space between items */
	margin-bottom: 0;	/* remove vertical space between items */
}

.flex_vertical_container >  .flex_sticky_child_stick_above {
	margin-top: 0;		/* remove vertical space between items */
	margin-bottom: auto;	/* remove vertical space between items */
}

/* ---------------------------------------------------------- */
/* simple class, to fill any __child__ class from above, to transmit height/width to any children */
.flex_sub_content {
	height:100%;
	width:100%;
}