How to stretch children to fill cross-axis?

Answer 1

• The children of a row-flexbox container automatically fill the container's vertical space.

• Specify flex: 1; for a child if you want it to fill the remaining horizontal space:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
  flex: 1; 
}

  
Left
  
Right

• Specify flex: 1; for both children if you want them to fill equal amounts of the horizontal space:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > div 
{
  flex: 1; 
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
}

  
Left
  
Right