Skip to content

Instantly share code, notes, and snippets.

@denismaster

denismaster/index.html

Last active August 29, 2018 19:22
Show Gist options
  • Save denismaster/7f110560d7563d678bfd5cfbbc36200d to your computer and use it in GitHub Desktop.
Save denismaster/7f110560d7563d678bfd5cfbbc36200d to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox layout problem
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test tasl</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="container">
<div class="controls">
<div class="month-selector">
<select>
<option value="" selected disabled>Select month</option>
<option value="January 18">January 18</option>
<option value="January 18">February 18</option>
<option value="January 18">March 18</option>
<option value="January 18">April 18</option>
<option value="January 18">May 18</option>
</select>
</div>
<div class="day-selector">
<div class="day-list">
<div class="day-list-item">Day 1</div>
<div class="day-list-item">Day 2</div>
<div class="day-list-item">Day 3</div>
<div class="day-list-item">Day 4</div>
<div class="day-list-item">Day 5</div>
<div class="day-list-item">Day 6</div>
<div class="day-list-item">Day 7</div>
<div class="day-list-item">Day 8</div>
<div class="day-list-item">Day 9</div>
<div class="day-list-item">Day 10</div>
<div class="day-list-item">Day 11</div>
<div class="day-list-item">Day 12</div>
<div class="day-list-item">Day 13</div>
<div class="day-list-item">Day 14</div>
<div class="day-list-item">Day 15</div>
<div class="day-list-item">Day 16</div>
<div class="day-list-item">Day 17</div>
<div class="day-list-item">Day 18</div>
<div class="day-list-item">Day 19</div>
<div class="day-list-item">Day 20</div>
<div class="day-list-item">Day 21</div>
<div class="day-list-item">Day 22</div>
<div class="day-list-item">Day 23</div>
<div class="day-list-item">Day 24</div>
<div class="day-list-item">Day 25</div>
<div class="day-list-item">Day 26</div>
<div class="day-list-item">Day 27</div>
<div class="day-list-item">Day 28</div>
<div class="day-list-item">Day 29</div>
</div>
</div>
</div>
<div class="view">
<div class="toolbar">
<span>First table</span>
<button>Add new</button>
</div>
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Key 1</td>
<td>Value 1</td>
</tr>
<tr>
<td>Key 2</td>
<td>Value 2</td>
</tr>
<tr>
<td>Key 3</td>
<td>Value 3</td>
</tr>
<tr>
<td>Key 4</td>
<td>Value 4</td>
</tr>
<tr>
<td>Key 5</td>
<td>Value 5</td>
</tr>
</tbody>
</table>
<div class="toolbar">
<span>Second table</span>
<button>Add new</button>
</div>
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Key 1</td>
<td>Value 1</td>
</tr>
<tr>
<td>Key 2</td>
<td>Value 2</td>
</tr>
<tr>
<td>Key 3</td>
<td>Value 3</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Raw
main.css
body{
font-family: Helvetica;
padding: 1rem;
background-color: #eee;
}
.container{
width: 800px;
background-color: #fff;
border: 1px solid #ddd;
padding: 1rem;
display:flex;
}
.controls{
max-width: 200px;
width:150px;
display: flex;
flex-direction: column;
align-items: stretch;
position:relative; /* Без этого absolute работать не будет */
}
.month-selector{
padding: 0 10px;
background-color: rgba(0,255,0,0.3);
height: 48px;
display: flex;
justify-content: center;
align-items:center;
flex: 0 0 48px;
}
.day-selector{
background-color: rgba(255,0,0,0.3);
overflow-y:auto; /* отвечает за скролл если дочерний блок больше родителя */
position: absolute; /* Абсолютное позиционирование */
/* Т.к. у родителя relative, то внутри родителя, а не всего экрана */
bottom:0; /* Крепимся без отступа снизу */
right: 0; /* Крепимся без отступа справа */
left: 0; /* Крепимся без отступа слева */
top:48px; /* Привязываемся к верхнему краю с отступом в высоту зеленого */
height: calc(100%-48px); /* Ставим динамическую высоту */
}
.day-list{
padding: 4px;
display:flex;
flex-direction: column;
align-items:stretch;
justify-content: flex-start;
height: 100%; /* Список должен занимать всю высоту для скролла */
}
.day-list-item{
text-align: center;
background-color: #fff;
border:1px solid #ddd;
padding:4px;
}
.view{
background-color: rgba(0,0,255,0.3);
padding:4px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items:stretch;
flex:1;
}
.toolbar{
padding:8px;
border:1px solid #ddd;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items:center;
}
.table{
background-color: #fff;
border: 1px solid #ddd
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment