so I have a strange issue,
I have this html:
<div class="container">
<div class="row">
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</div>
</div>
and then I have this CSS
html,
body {
padding: 0;
margin: 0;
}
.container {
height: 100vh;
display: flex;
}
.row {
display: flex;
padding: 50px 20px 20px;
}
.flex-column {
background-color: pink;
width: auto;
margin-right: 100px;
width: 280px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
padding: 20px 0 0 20px;
}
.box {
background-color: blue;
width: 120px;
height: 120px;
margin: 0 20px 20px 0;
}
If I use it like that, the content all tries to fit in the rows width, which is not what I want. I would like the row to expand (and present a scrollbar) depending on how much content is in it.
Now, by accident I noticed that if I add the flex-column class to the row, it fixes it (sort of). You can see with the background colours that it isn't doing everything correctly, but the side effect is that it actually works the way I want it to.
My question is how can I get it to wrap the row around the content but still have the scroll bar?
Here is the codepen to show what I currently have.
http://codepen.io/r3plica/pen/waPoQo
if you remove the flex-column class from the row, you will see the issue.
Do you have to use flexbox? You can do it without it. I have posted a flex and a non-flex example. If you want to use flex, you have to make sure you that you have a block container element around your flex element with overflow:scroll. Also your main flex element inside your container needs to be set to float so that it will properly expand horizontally to include your inline-block child elements.
Non-Flex Example:
html,
body {
padding: 0;
margin: 0;
}
.row {
background-color: red !important;
display: block;
padding: 50px 20px 20px;
overflow:scroll;
white-space:nowrap;
}
.flex-column {
background-color: pink;
display: inline-block;
margin-right: 100px;
padding: 20px 0 0 20px;
width: 280px;
vertical-align:top;
}
.box {
background-color: blue;
display: block;
float: left;
height: 120px;
margin: 0 20px 20px 0;
width: 120px;
}
<div class="container">
<div class="row">
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</div>
</div>
Flex Example:
html,
body {
padding: 0;
margin: 0;
}
.container{
display:block;
overflow:auto;
}
.row {
background-color: red !important;
display: flex;
padding: 50px 20px 20px;
overflow:scroll;
white-space:nowrap;
float:left;
}
.flex-column {
background-color: pink;
display: inline-block;
margin-right: 100px;
padding: 20px 0 0 20px;
width: 280px;
vertical-align:top;
}
.box {
background-color: blue;
display: block;
float: left;
height: 120px;
margin: 0 20px 20px 0;
width: 120px;
}
<div class="container">
<div class="row">
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</div>
</div>
Related
I'm building a board with cards inside, just like Trello board.
The JSFiddle is here
Here is the code:
<div class="board-container">
<div class="board-top-menu">
<div class="board-top-menu-item">TOP MENU ITEM 1</div>
<div class="board-top-menu-item">TOP MENU ITEM 2</div>
</div>
<div class="board-content">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 1</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 2</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 3</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 4</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And stylesheet:
.board-container {
padding: 0px;
margin: 0px;
display: flex;
flex-direction: column;
}
.board-top-menu {
width: 100%;
background-color: grey;
display: flex;
flex-direction: row;
padding: 5px;
}
.board-top-menu-item {
padding: 5px;
}
.board-top-menu-item:hover {
background-color: #fefefe;
}
.board-content {
overflow-x: auto;
overflow-y: hidden;
padding: 5px;
background-color: white;
white-space: nowrap;
height: 100%;
width: 100%;
}
.cards {
height: 100%;
overflow-y: auto;
padding-bottom: 20px;
}
.cards-container {
width: 270px;
display: inline-block;
height: 100%;
overflow: hidden;
min-height: 100px;
background-color: #e2e4e6;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding-bottom: 20px;
margin-right: 10px;
vertical-align: top;
}
.cards-container-head {
position: relative;
padding: 10px 15px;
margin-bottom: 5px;
}
.cards-container-title {
font-weight: bold;
white-space: normal;
width: 100%;
}
.card-container {
width: 100%;
margin: 0 auto 10px;
background-color: #fff;
min-height: 100px;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: 0.15s;
}
.card-header {
padding: 5px 10px;
border-bottom: 1px solid #dbdbdb;
white-space: normal;
word-break: break-all;
word-wrap: break-world;
display: flex;
flex-direction: row;
justify-content: space-between;
}
I cannot make my board scroll horizontally to see all card containers and vertically inside a card container.
Sometimes, as shown in fiddle, the containers get stucked one above another, and sometimes they scroll the whole page, not only the container.
.board-container {
padding: 0px;
margin: 0px;
display: flex;
flex-direction: column;
}
.board-top-menu {
width: 100%;
background-color: grey;
display: flex;
flex-direction: row;
padding: 5px;
}
.board-top-menu-item {
padding: 5px;
}
.board-top-menu-item:hover {
background-color: #fefefe;
}
.board-content {
overflow-x: auto;
overflow-y: hidden;
padding: 5px;
background-color: white;
white-space: nowrap;
height: 100%;
width: 100%;
}
.cards {
height: 100%;
overflow-y: auto;
padding-bottom: 20px;
}
.cards-container {
width: 270px;
display: inline-block;
height: 100%;
overflow: auto;
min-height: 100px;
background-color: #e2e4e6;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding-bottom: 20px;
vertical-align: top;
}
.cards-container-head {
position: relative;
padding: 10px 15px;
margin-bottom: 5px;
}
.cards-container-title {
font-weight: bold;
white-space: normal;
width: 100%;
}
.card-container {
width: 100%;
margin: 0 auto 10px;
background-color: #fff;
min-height: 100px;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: 0.15s;
}
.card-header {
padding: 5px 10px;
border-bottom: 1px solid #dbdbdb;
white-space: normal;
word-break: break-all;
word-wrap: break-world;
display: flex;
flex-direction: row;
justify-content: space-between;
}
<div class="board-container">
<div class="board-top-menu">
<div class="board-top-menu-item">TOP MENU ITEM 1</div>
<div class="board-top-menu-item">TOP MENU ITEM 2</div>
</div>
<div class="board-content">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 1</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 2</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 3</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 4</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I think you have an issue with how your elements are nested. Elements with the class cards-container seem to be nested within other elements with the same class. See the fiddle.
.board-container {
padding: 0px;
margin: 0px;
display: flex;
flex-direction: column;
}
.board-top-menu {
width: 100%;
background-color: grey;
display: flex;
flex-direction: row;
padding: 5px;
}
.board-top-menu-item {
padding: 5px;
}
.board-top-menu-item:hover {
background-color: #fefefe;
}
.board-content {
overflow-x: auto;
overflow-y: hidden;
padding: 5px;
background-color: white;
white-space: nowrap;
height: 100%;
width: 100%;
}
.cards {
height: 100%;
overflow-y: auto;
padding-bottom: 20px;
}
.cards-container {
width: 270px;
display: inline-block;
height: 100%;
overflow: hidden;
min-height: 100px;
background-color: #e2e4e6;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding-bottom: 20px;
margin-right: 10px;
vertical-align: top;
}
.cards-container-head {
position: relative;
padding: 10px 15px;
margin-bottom: 5px;
}
.cards-container-title {
font-weight: bold;
white-space: normal;
width: 100%;
}
.card-container {
width: 100%;
margin: 0 auto 10px;
background-color: #fff;
min-height: 100px;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: 0.15s;
}
.card-header {
padding: 5px 10px;
border-bottom: 1px solid #dbdbdb;
white-space: normal;
word-break: break-all;
word-wrap: break-world;
display: flex;
flex-direction: row;
justify-content: space-between;
}
/*Get rid of scrollbar from html */
html {
overflow-x: hidden;
}
/* Add vertical scroll to card container */
.card-container{
height: 50px;
overflow-y: scroll;
}
<div class="board-container">
<div class="board-top-menu">
<div class="board-top-menu-item">TOP MENU ITEM 1</div>
<div class="board-top-menu-item">TOP MENU ITEM 2</div>
</div>
<div class="board-content">
<div>
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 1</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
</div>
</div>
</div>
the html provided is a little messy but i think you need something like this :
<div class="board-top-menu">
<div class="board-top-menu-item">TOP MENU ITEM 1</div>
<div class="board-top-menu-item">TOP MENU ITEM 2</div>
</div>
<div class="board-container">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 1</div>
</div>
<div class="cards">
<div class="card-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="card-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="card-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
</div>
</div>
<div class="board-content">content</div>
i didn't do much on css but it should be something like this :
body { overflow:hidden; }
.board-container {
padding: 0px;
margin: 0px;
}
.board-top-menu {
width: 100%;
background-color: grey;
display: flex;
flex-direction: row;
padding: 5px;
}
.board-top-menu-item {
padding: 5px;
}
.board-top-menu-item:hover {
background-color: #fefefe;
}
.board-content {
display: inline-block;
float: left;
padding: 5px;
background-color: white;
white-space: nowrap;
height: 100%;
width: calc(100% - 300px);
}
.cards {
height: 100vh;
overflow-y: scroll;
padding-bottom: 20px;
}
.cards-container {
width: 270px;
float: left;
display: inline-block;
height: 100%;
min-height: 100px;
background-color: #e2e4e6;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding-bottom: 20px;
margin-right: 10px;
vertical-align: top;
}
.cards-container-head {
position: relative;
padding: 10px 15px;
margin-bottom: 5px;
}
.cards-container-title {
font-weight: bold;
white-space: normal;
width: 100%;
}
.card-container {
width: 100%;
margin: 0 auto 10px;
background-color: #fff;
min-height: 100px;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: 0.15s;
}
.card-header {
padding: 5px 10px;
border-bottom: 1px solid #dbdbdb;
white-space: normal;
word-break: break-all;
word-wrap: break-world;
display: flex;
flex-direction: row;
justify-content: space-between;
}
See this pen
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
I have managed to make vertical spaces between the columns by adding padding to the rows. But now the horizontal spaces between the contents are ways too much. How can I configure the spacing between them?
That large horizontal space is because of the fixed width of the content class if you remove that, you'll see it grow.
You can set the width of the content in % or add a margin to the content class.
.container {
text-align: center;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
}
.row{
padding:15px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col4">
<div class="content">1x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x3</div>
</div>
</div>
<div class="row ">
<div class="col-md-4 col4">
<div class="content">2x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x3</div>
</div>
</div>
<div class="row col4 col4">
<div class="col-md-4 col4">
<div class="content">3x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS Grid to achieve that layout you desire:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 5px;
position:absolute;
left:50%;
transform:translateX(-50%);
width:80%;
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height:100px;
max-width: 350px;
}
<div class="grid-container">
<div class="item">1x1</div>
<div class="item">1x2</div>
<div class="item">1x3</div>
<div class="item">2x1</div>
<div class="item">2x2</div>
<div class="item">2x3</div>
<div class="item">3x1</div>
<div class="item">3x2</div>
<div class="item">3x3</div>
</div>
Using flexbox:
.flex-container {
display: flex;
/*Generates a flexbox layout with default flex direction as row */
width: 100%;
/* Not really required */
align-items: center;
/*Aligns contents vertically */
justify-content: center;
/*Aligns contents horizontally */
text-align: center;
/*Aligns further text in the center */
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height: 400px;
width: 300px;
margin: 5px;
}
<div class="flex-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="flex-container">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="flex-container">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Use float:left; with class content as below:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
float: left;
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
If I'm reading your request correctly, you are just asking how to make it look like the boxes are in the center of the page, and they are evenly spaced. see if this is what you're looking for:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.col-md-4 {
margin: 5px -10px 0px -4px;;
}
play with the numbers until you get the desired location.
Though I would strongly suggest that you add your own class in addition to col-md-4 to the boxes, which will prevent this new setting to col-md-4 from affecting any future use of this bootstrap class.
in other words . . .
CSS:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.box-move {
margin: 5px -10px 0px -4px;;
}
and HTML:
<div class="container">
<div class="row">
<div class="col-md-4 box-move">
<div class="content">1x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">2x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">3x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x3</div>
</div>
</div>
</div>
You can remove a lot of the stuff there and simplify it to make it responsive width a set margin:
.contents {
background-color: black;
color: white;
height: 500px;
margin: 20px 0px;
}
<div class="container-fluid text-center">
<div class="row">
<div class="col-md-4">
<div class="contents">1x1</div>
</div>
<div class="col-md-4">
<div class="contents">1x2</div>
</div>
<div class="col-md-4">
<div class="contents">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">2x1</div>
</div>
<div class="col-md-4">
<div class="contents">2x2</div>
</div>
<div class="col-md-4">
<div class="contents">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">3x1</div>
</div>
<div class="col-md-4">
<div class="contents">3x2</div>
</div>
<div class="col-md-4">
<div class="contents">3x3</div>
</div>
</div>
</div>
</div>
Parent hasnt got a defined width because there are unknown number of children inside.
Why do children fall into new line and how to prevent that? Children need to be on the same line.
.wrap {
position: absolute;
left: 50%;
top: 50px;
height:40px;
transform: translateX(-50%);
}
.box {
width:40px;
height:40px;
float:left;
background:red;
margin-right:1px;
}
<div class="wrap">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
You should consider using flex-box.
And to answer your question: floated DIVs are not supposed and will not expand their parent's width, as they are 'floating' above the content flow.
Absolute positioned block elements will have an initial width of zero, if not specified otherwise. Thus, they're behaving differently than usual.
The floating elements indeed behave as usual: as the parent element provides not enough width (zero!) to display them all in one line, of course they break to the next line.
.wrap {
display: flex;
justify-content: center;
flex-wrap: nowrap;
margin-top: 50px;
}
.box {
width:40px;
height:40px;
float:left;
background:red;
margin-right:1px;
}
<div class="wrap">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
Since you are using left: 50%, the maximum width of .wrap is the 50% remaining of body.
That's why the wrap is happening.
To avoid it, add more space to it with margin-right: -50%. This will give it an aditional 50% (that is the space lost with the left: 50% style)
.wrap {
position: absolute;
left: 50%;
margin-right: -50%;
top: 50px;
height:40px;
transform: translateX(-50%);
}
.box {
width:40px;
height:40px;
float:left;
background:red;
margin-right:1px;
}
<div class="wrap">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
What happens here is that when you use translate the element is visually re-positioned, though from a document flow perspective it is still positioned at 50% left.
So as you can see in this sample, they wrap at the same time though one think that the first shouldn't as there is space left, but there isn't, as technically the first has the same position as the second, hence it wrap at the same time.
.wrap {
position: absolute;
left: 50%;
top: 150px;
height:40px;
}
.wrap.translate {
top: 50px;
transform: translateX(-50%);
}
.box {
width:40px;
height:40px;
float:left;
background:red;
margin-right:1px;
}
<div class="wrap translate">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
<div class="wrap">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
The simplest and best way to solve this is to make the wrap an inline-block and set text-align: center on its parent, in this case the body
body {
text-align: center;
}
.wrap {
display: inline-block;
height:40px;
}
.box {
width:40px;
height:40px;
float:left;
background:red;
margin-right:1px;
}
<div class="wrap">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
Yet another is to make the box's inline-block and set text-align: center on the wrap
Note, to defeat the white space between inline block elements, I also change the markup so each box's end and start tag are on the same line. Here is a few more ways to solve that: how-to-remove-the-space-between-inline-block-elements
.wrap {
height:40px;
text-align: center;
}
.box {
display: inline-block;
width:40px;
height:40px;
background:red;
margin-right:1px;
}
<div class="wrap">
<div class="box">0
</div><div class="box">1
</div><div class="box">2
</div><div class="box">3
</div><div class="box">4
</div><div class="box">5
</div><div class="box">6
</div><div class="box">7
</div><div class="box">8
</div><div class="box">9
</div><div class="box">10
</div>
</div>
If you don't need to support older browsers you can also use Flexbox
.wrap {
display: flex;
justify-content: center;
height:40px;
}
.box {
width:40px;
height:40px;
background:red;
margin-right:1px;
}
<div class="wrap">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
Use center class :
.wrap {
text-align: center;
margin: 50px auto 0 auto;
height:40px;
}
.center {
display: inline-block;
}
.box {
width: 40px;
height:40px;
float:left;
background:red;
margin-right:1px;
}
#media all and (max-width: 474px) {
.box {
width: 25px;
}
}
<div class="wrap">
<div class="center">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
</div>
I am trying to create something like so:
I am sure I am starting out wrong but I cannot see how else, plus I can't find anything online to help. My code so far is:
<div class="container">
<div class="one">
one
</div>
<div class="two">
two
</div>
<div class="three">
three
</div>
<div class="four">
four
</div>
<div class="five">
five
</div>
<div class="six">
six
</div>
</div>
And the css
.container {
background-color: blue;
display: flex;
}
.one {
height: 400px;
width: 30%;
background-color: red;
}
.two {
height: 250px;
width: 35%;
background-color: white;
}
.three {
height: 400px;
width: 35%;
background-color: lightblue;
}
The problem is that I cannot get the next set of divs to line up under correctly. Jsfiddle
Solution1: Why not you use Bootstrap, Thanks.
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-5">
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
Solution2: Use Masonry Grid:
#container {
width: 100%;
max-width: 700px;
margin: 2em auto;
}
.cols {
-moz-column-count:3;
-moz-column-gap: 3%;
-moz-column-width: 30%;
-webkit-column-count:3;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;
column-count: 3;
column-gap: 3%;
column-width: 30%;
}
.box {
margin-bottom: 20px;
}
.box.one {
height: 200px;
background-color: #d77575;
}
.box.two {
height: 300px;
background-color: #dcbc4c;
}
.box.three {
background-color: #a3ca3b;
height: 400px;
}
.box.four {
background-color: #3daee3;
height: 500px;
}
.box.five {
background-color: #bb8ed8;
height: 600px;
}
.box.six {
background-color: #baafb1;
height: 200px;
}
<div id="container" class="cols">
<div class="box one"></div>
<div class="box two"></div>
<div class="box one"></div>
<div class="box three"></div>
<div class="box two"></div>
<div class="box five"></div>
<div class="box one"></div>
<div class="box two"></div>
<div class="box six"></div>
<div class="box three"></div>
<div class="box two"></div>
</div>
I'm new-ish to Flexbox and trying to build a responsive table-based calendar with round background colors on certain cells. The problem I'm encountering is that since each cell's width is dynamic and on wider (most) screen sizes, the backgrounds are ovals, not circles. How can I set them as circles without disturbing the current layout or using fixed sizes?
As a bonus, I'd also like to be able to dynamically align the date/year with the far-left column.
CSS:
.table {
display: flex;
flex-flow: column nowrap;
box-pack: justify;
justify-content: space-between;
width: 100%;
height: 250px;
}
.table .table-row {
display: flex;
flex-flow: row nowrap;
width: 100%;
}
.table .table-row .table-cell {
display: flex;
padding: 5px;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
justify-content: center;
}
.table .table-row .event-on {
border-radius: 100%;
background-color: grey;
}
Markup:
<section id="event-calendar">
<div id="calendar-left">
<div id="calendar-left-cont">
<h1>December 2016</h1>
<div class="table">
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell event-on">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
</section>
Pen: http://codepen.io/ourcore/pen/rWbjYZ.
Thanks!
Added a pseudo element and add some styling to it.
.table {
display: flex;
flex-flow: column nowrap;
box-pack: justify;
justify-content: space-between;
width: 100%;
height: 250px;
}
.table .table-row {
display: flex;
flex-flow: row nowrap;
width: 100%;
}
.table .table-row .table-cell {
display: flex;
padding: 5px;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
justify-content: center;
}
.table .table-row .event-on {
border-radius: 100%;
position: relative;
}
div.table-cell.event-on::before {
content: '';
width: 25px;
height: 25px;
background-color: grey;
position: absolute;
z-index: -9;
left: 10px;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
border-radius: 13px;
}
<section id="event-calendar">
<div id="calendar-left">
<div id="calendar-left-cont">
<h1>December 2016</h1>
<div class="table">
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell event-on">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
</section>
Used a <span> and ...
<s> for past days
<i> for event
<b> for important event
Changed .table-cell flex-flow to column nowrap and added align-items:center
CODEPEN