flex-grow

Visar hur ett element kan ta upp oanvänt vertikalt utrymme i en flexad container

by Sophie

HTML

<div id="wrapper">
<div id="wrapper-2">
    <div id="first">Rubrik</div>
    <div id="second">Tar upp resterande utrymme</div>
    <div id="buttons">
    Knappar
    </div>
</div>
</div>

CSS

#wrapper
{
   width:300px;
   height:300px;
    display: flex;
    flex-direction: column;
}
#wrapper-2
{
   height:100%;
   display: flex;
   flex-direction: column;
}

#first
{
   background-color:blue;
}

#second
{
   background-color: red;
   flex: 1;
}

#buttons {
  background: green;
}