How can I stretch this nav link in flexbox? [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have little problem with flexbox that I don't really understand. How can I stretch the sidebar last link to be the same height as the content boxes?
Explanation image: http://postimg.org/image/f3zsn6051/
Demo:
$(document).ready(function(){
$( ".search-btn" ).click(function() {
$( ".search-bar" ).toggleClass( "hidden" );
});
$( ".add-task-btn" ).click(function() {
$( ".add-task-bar" ).toggleClass( "hidden" );
});
$( ".main-section" ).click(function() {
$( ".details" ).toggleClass( "hidden" );
});
$( "#clandar, .set-due-date" ).hover(function() {
$( ".set-due-date" ).toggleClass( "hidden" );
});
})
* {
box-sizing: border-box;
}
body{
color: #fff;
position: relative;
left: 0;
right: 0;
z-index: 0;
font-family: 'Open Sans', sans-serif;
}
body:before {
content: "";
position: fixed;
left: 0;
right: 0;
z-index: -1;
background: url(../img/bg-1.jpeg) no-repeat center center;
background-size: cover;
height: 100%;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
a{
text-decoration: none;
}
.fa-star,.fa-map-marker {
color: #9596a4;
}
.container{
width: 600px;
margin: 15px auto;
overflow: hidden;
position: relative;
}
.hidden{
display: none;
}
/**********************************
* Grid
**********************************/
[class*="col-"] {
float: left;
}
.row:after {
content: "";
clear: both;
display: block;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.col-off-2 > .col-2{width: 11.66%;}
.col-off-10 > .col-10{width: 88.33%; }
/**********************************
* Tiltle bar
**********************************/
header{
background-color: rgba(255, 255, 255, 0.3);
text-align: center;
position: relative;
}
.header-bar-buttons {
float: left;
margin: 18px;
}
.header-bar-buttons a {
width: 11px;
height: 11px;
float: left;
margin: 0 2px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 10px;
}
.header-all-tasks {
display: inline-block;
margin: 35px 0 10px 0;
font-size: 18px;
color: #ffffff;
}
.header-btn {
float: right;
margin: 35px 16px 10px 0;
}
.header-btn span {
color: rgba(255, 255, 255, 0.5);
margin: 0 8px;
}
/**********************************
* Navigation
**********************************/
.centred-menu{
position: relative;
top: 40%;
left:40%
}
.centred-inv-menu{
position: relative;
top: 80%;
left:40%
}
.menu a{
text-decoration: none;
display: block;
color: #CFC4CD;
}
.nav-btn-1{
background-color: #55566e;
height: 70px;
}
.nav-btn-2{
background-color: #ff5f65;
height: 70px;
}
.nav-btn-3{
background-color: #fdcd63;
height: 70px;
}
.nav-btn-4{
background-color: #d575f8;
height: 70px;
}
.nav-btn-5{
background-color: #00eeb8;
height: 70px;
}
.nav-inv-btn{
background-color: rgba(52, 63, 70, 0.5);
}
/**********************************
* Task list global classes
**********************************/
.task-link{
color: #ffffff;
}
.checkbox{
display: flex;
align-items: center;
justify-content: center;
background-color: #4c4b62;
border-bottom: 1px solid rgba(233, 233, 233, 1);
}
.box {
border-bottom: 1px solid rgba(233, 233, 233, 1);
background-color: #55566E;
}
.inv{
opacity: 0.6;
}
.flex-height{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
/**********************************
* Main taks
**********************************/
.box h1{
clear: both;
font-size: 44px;
margin: 35px 0 0;
color: #ffffff;
}
.task-1{
border-right: 10px solid #ff5f65;
border-bottom: 1px solid rgba(233, 233, 233, 1);
}
/**********************************
* small-task
**********************************/
.task-content-small{
padding: 25px 30px 15px 30px;
}
.location-and-date-small{
margin: 0;
font-size: 10px;
}
.task-name {
margin: 23px 0 0;
line-height: 1.5;
font-size: 15px;
}
/**********************************
* seconday-section
**********************************/
.task-content {
padding: 25px 35px 15px 25px;
position: relative;
}
.favourite {
float: right;
}
.location-and-date {
color: #9596a4;
float: left;
font-weight: bold;
font-size: 12px;
margin: 5px;
}
.location-and-date-small {
margin: 0;
font-size: 10px;
}
/**********************************
* color
**********************************/
.active{
border-left: 1px solid #ff5f65;
border-bottom: 1px solid white;
border-right: 10px solid #fdcd63;;
}
.purple{
border-right: 10px solid #d575f8;
}
.inv-red{
border-right: 10px solid #ff5f65;
}
.inv-purple{
border-right: 10px solid #9B79AB;
}
.inv-yell{
border-right: 10px solid #C2B28A;
}
.green{
border-bottom: 1px solid rgba(233, 233, 233, 1);
border-right: 10px solid #00eeb8;
height: 153px;
}
.green-top{
border-top: 10px solid #00eeb8;
}
/**********************************
*Search bar
**********************************/
.search-bar, .add-task-bar {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 10;
padding: 30px;
text-align: left;
}
.search-bar input {
width: 90%;
background-color: rgba(255, 255, 255, 0);
border: none;
color: #fff;
font-size: 30px;
margin: 0 0 0 15px;
}
.search-bar span {
color: rgba(255, 255, 255, 0.5);
}
/**********************************
*Add Task
**********************************/
.add-task-bar {
padding: 0;
}
.add-new-task {
color: rgba(255, 255, 255, 0.8);
vertical-align: middle;
padding: 30px;
}
.add-new-task:last-child {
background-color: rgba(0, 0, 0, 0.4);
}
.add-new-task a {
color: rgba(255, 255, 255, 0.5);
}
.add-new-task h2 {
font-weight: normal;
font-size: 29px;
float: left;
margin: 0
}
.add-new-task p {
float: left;
margin: 10px 0;
}
.add-new-task div {
float: right;
}
.select-category-icons a {
margin: 23px;
border-radius: 50%;
position: relative;
display: inline-block;
padding: 13px;
}
.add-task-icons {
margin: 10px 0;
}
.add-task-icons a {
margin: 0 8px;
}
.category-button {
color: #ff5f65;
}
.close-button {
color: rgba(255, 255, 255, 0.8);
}
.selected-arrow-add-task::before {
top: 49px;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 13px solid rgba(0, 0, 0, 0.4);
}
.home-button{
background-color: #ff5f65 ;
}
.briefcase-button{
background-color: #C2B28A;
}
.screen-button{
background-color: #D575F8;
}
/**********************************
*Task detiles Add
**********************************/
.task-details {
position: absolute;
top: 69px;
bottom: 0;
right: 0;
background-color: #55566e;
z-index: 20;
}
.task-details-border{
border-bottom: 1px solid #9596a4;
}
.checkbox-empty{
background-color: #55566e;
display: flex;
align-items: center;
justify-content: center;
}
.task-details-block a {
text-decoration: none;
color: #9596a4;
}
.task-details p {
font-weight: bold;
font-size: 12px;
}
.paperclip {
position: absolute;
bottom: 20px;
right: 20px;
}
.upper-content::after {
height: 10px;
width: 100%;;
}
.task-content-details {
padding: 20px 20px 20px 10px;
}
.task-content-details-small {
padding: 0 0 0 10px;
}
.teal-content {
color: #00eeb8;
}
/**********************************
*Clander
**********************************/
.set-due-date {
position: absolute;
right: 0%;
top: 15%;
background-color: #fff;
color: #4f5064;
text-align: center;
}
.back-ground-inv {
position: absolute;
top: 12%;
bottom: 0;
right: 300px;
background-color: rgba(85, 86, 110, 0.57);
z-index: 20;
/* opacity: 0.7; */
}
.prev-next-month {
color: #cfcfd3;
}
.calendar-controls,
.calendar-header {
background-color: #ecedf7;
padding: 10px;
}
.calendar-controls span {
margin: 0 5px;
font-weight: bold;
}
.calendar-header {
border-left: 11px solid #ecedf7;
border-right: 11px solid #ecedf7;
}
.calendar-body {
border-bottom: 11px solid #fff;
border-left: 11px solid #fff;
border-right: 11px solid #fff;
border-top: 12px solid #fff;
}
.calendar {
font-size: 11px;
}
.calendar td {
padding: 7px;
}
.calendar th {
text-transform: uppercase;
padding: 0 5px 10px 5px;
font-size: 9px;
}
.cell-border,
.cell-background {
border-radius: 50%;
padding: 3px;
}
.cell-border {
border: 1px solid red;
}
.cell-background {
background-color: #dce0e4;
}
.selected-arrow-details::before {
left: 0;
top: 45%;
border-top: 5px solid transparent;
border-left: 6px solid #fff;
border-bottom: 5px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To Do List</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header class="row">
<div class="col-12">
<div class="header-bar-buttons">
</div>
<div class="hidden search-bar">
<span class="fa fa-search fa-2x"></span>
<input type="text" name="search" value="" autofocus="">
</div>
<div class="hidden add-task-bar">
<div class="add-new-task clearfix">
<h2>Add a new task</h2>
<div class="add-task-icons">
<span class="fa fa-star-o fa-lg"></span>
<span class="fa fa-calendar fa-lg"></span>
<span class="fa fa-circle fa-lg category-button"></span>
</div>
</div>
<div class="add-new-task clearfix">
<p>
Select a category
</p>
<div class="select-category-icons">
<span class=" fa fa-home"></span>
<span class=" fa fa-briefcase"></span>
<span class=" fa fa-desktop"></span>
<span class=" fa fa-users"></span>
</div>
</div>
</div>
<h3 class="header-all-tasks">All tasks</h3>
<div class="header-btn">
<span class="fa fa-search fa-lg search-btn"></span>
<span class="fa fa-plus-circle fa-lg add-task-btn"></span>
</div>
</div>
</header>
<main class="row col-off-2 col-off-10">
<nav class="menu col-2">
<span class="centred-menu nav-icon fa fa-inbox fa-lg"></span>
<span class="centred-menu nav-icon fa fa-home fa-lg"></span>
<span class="centred-menu nav-icon fa fa-briefcase fa-lg"></span>
<span class="centred-menu nav-icon fa fa-desktop fa-lg"></span>
<span class="centred-menu nav-icon fa fa-users fa-lg"></span>
<span class="centred-inv-menu nav-icon fa fa-cog fa-lg"></span>
</nav>
<article class="col-10 autoheight">
<section class="main-section flex-height row">
<div class="checkbox col-1 ">
<span class="centered fa fa-circle-thin fa-lg"></span>
</div>
<div class=" task-content box col-11 task-1">
<p class="location-and-date"><span class="fa fa-map-marker fa-lg"></span> At Tesco | Next monday</p><span class="fa fa-star"></span>
<h1>Buy a new better toothbrush</h1>
</div>
<section class="details hidden row">
<div class="col-6 back-ground-inv">
<div class="set-due-date hidden">
<div class="calendar-controls">
<span><</span>
<span>September</span>
<span>></span>
</div>
<table class="calendar">
<thead class="calendar-header">
<tr>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
<th>sat</th>
<th>sun</th>
</tr>
</thead>
<tbody class="calendar-body">
<tr>
<td class="prev-next-month">24</td>
<td class="prev-next-month">25</td>
<td class="prev-next-month">26</td>
<td class="prev-next-month">27</td>
<td class="prev-next-month">28</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td class="prev-next-month">1</td>
<td class="prev-next-month">2</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-6 task-details">
<div class="task-details-block flex-height">
<div class="col-1 checkbox-empty green-top task-details-border">
<span class="centered fa fa-circle-thin fa-lg"></span>
</div>
<div class="col-11 task-details-border">
<div class=" task-content-details green-top">
<h2>Buy a new toothbrush</h2>
<span class="fa fa-star-o"></span>
</div>
</div>
</div>
<div id="clandar" class="task-details-block flex-height">
<div class="col-1 checkbox-empty task-details-border ">
<span class="centered fa fa-calendar fa-lg"></span>
</div>
<div class="col-11 task-details-border">
<div class="task-content-details-small task-content-details">
<p>Set a due date</p>
</div>
</div>
</div>
<div class="task-details-block flex-height">
<div class="col-1 checkbox-empty task-details-border flex-height">
<span class=" fa fa-clock-o fa-lg"></span>
</div>
<div class="col-11 task-details-border flex-height">
<div class="task-content-details-small task-content-details">
<p>Set a reminder</p>
</div>
</div>
</div>
<div class="task-details-block flex-height">
<div class="col-1 checkbox-empty task-details-border ">
<span class=" teal-content fa fa-circle fa-lg"></span>
</div>
<div class="col-11 task-details-border">
<div class="task-content-details-small task-content-details">
<p>Work</p>
</div>
</div>
</div>
<div class="task-details-block flex-height">
<div class="col-1 checkbox-empty task-details-border ">
<span class=" fa fa-edit fa-lg"></span>
</div>
<div class="col-11 task-details-border">
<div class="task-content-details-small task-content-details">
<p>Add note</p>
</div>
</div>
</div>
<div class="paperclip">
<span class="fa fa-paperclip fa-lg"></span>
</div>
</div>
</section>
</section>
<section class="seconday-section row">
<section class="a-side col-6">
<div class="left-task flex-height">
<div class="checkbox col-2">
<span class="centered fa fa-circle-thin fa-lg"></span>
</div>
<div class="task-content-small active box small-box col-10">
<p class="location-and-date location-and-date-small">Tomorrow</p>
<p class="task-name">Clean my roomm</p>
</div>
</div>
<div class="left-task flex-height">
<div class="checkbox col-2">
<span class="centered fa fa-circle-thin fa-lg"></span>
</div>
<div class="task-content-small box small-box col-10 purple">
<p class="location-and-date location-and-date-small">18. September 2013</p>
<p class="task-name"><a href="#" class="task-link">Do a homework from ipsum dolor amet,
consectetur adipiscing</a></p>
</div>
</div>
<div class="left-task flex-height inv">
<div class="checkbox col-2">
<span class=" fa fa-check-circle fa-lg"></span>
</div>
<div class="task-content-small box small-box col-10 inv-red">
<p class="location-and-date location-and-date-small">Yesterday</p>
<p class="task-name">Buy a milk</p>
</div>
</div>
</section>
<section class="b-side col-6">
<div class="left-task flex-height">
<div class="checkbox col-2">
<span class="centered fa fa-circle-thin fa-lg"></span>
</div>
<div class="task-content-small box small-box col-10 green">
<p class="location-and-date location-and-date-small">14. September 2013</p>
<p class="task-name"><a href="#" class="task-link">Clean the house and mauris pretium purus
id sapien consectetur</a></p>
</div>
</div>
<div class="left-task inv flex-height">
<div class="checkbox col-2">
<span class=" fa fa-check-circle fa-lg"></span>
</div>
<div class="task-content-small box small-box col-10 inv-purple">
<p class="location-and-date location-and-date-small">5. October 2013</p>
<p class="task-name">5. October 2013</p>
</div>
</div>
<div class="left-task inv flex-height">
<div class="checkbox col-2">
<span class=" fa fa-check-circle fa-lg"></span>
</div>
<div class="task-content-small box small-box col-10 inv-yell">
<p class="location-and-date location-and-date-small">5. October 2013</p>
<p class="task-name">Call to Jakub Antalik</p>
</div>
</div>
</section>
</section>
</article>
</main>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
CodePen

Answer 1

You need to make a few adjustments.
I'm using inline styles for demo purposes only.
First, define a height for the container:
<main class="row col-off-2 col-off-10" style="height: 529px;">
I've used 529px because that is the natural height of the element.
Second, make the nav element a flexbox with a column direction, and height equal to container height:
<nav class="menu col-2" style="display: flex; flex-direction: column; height: 100%;">
You may need to tinker with the height. If 100% isn't precise, try 93.5%.
Third, use the flex-grow property to tell the last nav item to take all available space.
<a href="#" class="nav-inv-btn autoheight" style="flex-grow: 1;">
DEMO: http://codepen.io/anon/pen/rOjdYg