On gists

Parent - Child (height - min-height inherited)

CSS CSS trick

app.css Raw #

/* 1 */
.parent
{
  	min-height: 200px;
  	height: 1px;
	border: 3px solid black;
}

.child
{
  background: mistyrose;
  height: 100%;
}


/* 2 */
.parent
{
  	min-height: 200px;
	border: 3px solid black;
	display: flex;
	
}

.child
{
  background: mistyrose;
  width: 100%;
}


/* 3 */
.parent
{
  	min-height: 200px;
	border: 3px solid black;
	display: flex;
	flex-direction: column;
	
}

.child
{
  background: mistyrose;
  flex: 1;
}


/* 4 */
.parent
{
  min-height: 200px;
	border: 3px solid black;
	display: grid;
}

.child
{
  background: mistyrose;
}


/* 5 */
.parent
{
  	min-height: 200px;
	border: 3px solid black;
	
	
}

.child
{
  background: mistyrose;
	min-height: inherit;
}