I'm trying to modify my layout on mobile using flexbox and running into an issue. I would like for the middle box (2) to be rendered on its own line at 100% width on mobile. I used order: 1 to move the box to the end, but now I can't figure out how to display the box at full width.
.left, .middle, .right {
background-color: rgba(84, 97, 156, 0.2);
height: 100px;
padding: 20px;
margin: 5px;
border-radius: 4px;
color: rgb(84, 97, 156);
}
.right {
text-align: right;
flex-grow: 1;
}
.middle {
text-align: center;
order: 1;
}
.table-row {
display: flex;
}
<div class="table-row">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
Here you can resize the viewable area https://jsfiddle.net/mtukb38r/
.table-row {
display: flex;
}
.left,
.middle,
.right {
background-color: rgba(84, 97, 156, 0.2);
height: 100px;
padding: 20px;
margin: 5px;
border-radius: 4px;
color: rgb(84, 97, 156);
}
.right {
text-align: right;
flex-grow: 1;
}
.middle {
text-align: center;
}
#media only screen and (max-width: 600px) {
.table-row {
flex-wrap: wrap;
}
.middle {
text-align: center;
order: 1;
width: 100%;
}
}
<div class="table-row">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
basically it's this on desktop
.table-row {
display: flex;
}
.left,
.middle,
.right {
background-color: rgba(84, 97, 156, 0.2);
height: 100px;
padding: 20px;
margin: 5px;
border-radius: 4px;
color: rgb(84, 97, 156);
}
.right {
text-align: right;
flex-grow: 1;
}
.middle {
text-align: center;
}
<div class="table-row">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
and this on mobile
.table-row {
display: flex;
}
.left,
.middle,
.right {
background-color: rgba(84, 97, 156, 0.2);
height: 100px;
padding: 20px;
margin: 5px;
border-radius: 4px;
color: rgb(84, 97, 156);
}
.right {
text-align: right;
flex-grow: 1;
}
.middle {
text-align: center;
}
.table-row {
flex-wrap: wrap;
}
.middle {
text-align: center;
order: 1;
width: 100%;
}
<div class="table-row">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
Related
I am using absolute positioning to layer div one, two, three (and cover main). Would it be possible to achieve the same with CSS grid?
div.main is always displayed
div one, two, three will be shown when needed
Update: Toggle button added for better visualisation
const div = document.querySelector('div.content');
document.querySelector('button').addEventListener('click', () => {
const on = document.querySelector('.on');
on?.classList.remove('on');
(on?.nextElementSibling || div.firstElementChild).classList.add('on');
});
* {
box-sizing: border-box;
}
button {
padding: 0.5em;
margin-bottom: 1em;
}
.content {
width: 15em;
height: 8em;
position: relative;
margin: 0;
padding: 0;
border: 1px solid #aaa;
}
.main {
height: 100%;
background: #eee;
padding: 0.5em;
}
.one,
.two,
.three {
display: none;
margin: 0;
padding: 2em;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.one.on,
.two.on,
.three.on {
display: block;
}
.one {
background: #fef8;
}
.two {
background: #fec8;
}
.three {
background: #cdc8;
}
<button>Toggle</button>
<div class="content">
<div class="main on">This is main</div>
<div class="one">This is one</div>
<div class="two">This is two</div>
<div class="three">This is three</div>
</div>
Assuming that the div just need to stack on each other, perhaps a simple implement would be setting content a grid of a single cell, and have all the div placed in grid-area: 1/1/1/1.
Example: (with a simple display toggle)
const btn = document.querySelector("button");
const divs = document.querySelectorAll("div > div");
let i = 1;
btn.addEventListener("click", () => {
if (i === 4) {
divs.forEach((div) => div.classList.remove("on"));
i = 1;
return;
}
divs[i - 1].classList.toggle("on");
divs[i].classList.toggle("on");
i++;
});
.content {
width: 15em;
height: 20em;
margin: 0;
padding: 0;
border: 1px solid blue;
display: grid;
}
.main {
border: 1px solid red;
grid-area: 1/1/1/1;
}
.one,
.two,
.three {
display: none;
margin: 0;
padding: 1em;
z-index: 3;
border: 1px solid green;
grid-area: 1/1/1/1;
}
.one.on,
.two.on,
.three.on {
display: block;
}
button {
padding: 6px;
margin-bottom: 1em;
}
.one {
background-color: rgba(100, 149, 237, 0.25);
}
.two {
background-color: rgba(34, 139, 34, 0.25);
}
.three {
background-color: rgba(255, 140, 0, 0.25);
}
<button>Toggle</button>
<div class="content">
<div class="main">This is main</div>
<div class="one">This is one</div>
<div class="two">This is two.</div>
<div class="three">This is three.</div>
</div>
I have a website that shows "cards" on a pinboard, 7 wide on a pc down to 4 wide on an ipad.
What I would like to happen is when the user views this on an iphone, the image with a class of "image eventItem" stays in the same location and the h4 "pinboard-day", the h4 "pinboard-date" and the p "pinboard-text" moves up on top of the image to the right and changes from black to white.
What I am trying to acheive is similar to an accordian, so that when the user clicks on the image on an iphone the standard view will appear as for pc etc.
I currently have over 150 events currently, so I am looking for a way to acheive this without having to re-write everything out again.
Any help would be appreciated.
Regards
Milton.
<div class="wrapper-pinboard">
<nav>
<div class="items">
<span id="all-btn" class="item active" data-name="all" >All</span>
<span class="item" data-name="site1" class="list">Site 1</span>
<span class="item" data-name="site2" class="list">Site 2</span>
<span class="item" data-name="site3" class="list">Site 3</span>
<span class="item" data-name="site4" class="list">Site 4</span>
<span class="item" data-name="site5" class="list">Site 5</span>
<span class="item" data-name="site6" class="list">Site 6</span>
</div>
</nav>
<div class="gallery">
<div class="image eventItem" date="30-10-21" id="site1" data-name="site1">
<span><img src="img/Site1-logo.jpg" alt=""></span>
<h4 id="pinboard-day">Thursday night</h4>
<h4 id="pinboard-date" >30th October</h4>
<p id="pinboard-text"><b>All Welcome</b> </p>
<br>
<p> $20 Entrance Fee
<br> Doors Open 6:00PM
<br> Headline act is -
<br> Intermission 7:30PM
<br>
<br> <b>Doors Close - 8:30PM</b>
</p>
<div class="card-bottom">
<img id="card-bottom-site1-image" src="img/site1-139x113px.jpg" alt="">
<p class="card-text-bottom">
Premises
<br>Street Address
<br>City
</p>
</div>
</div>
<div class="image eventItem" date="10-10-21" id="site2" data-name="site2">
<span><img src="img/Site2-logo.jpg" alt=""></span>
<h4 id="pinboard-day">Thursday night</h4>
<h4 id="pinboard-date" >10th October</h4>
<p id="pinboard-text"><b>All Welcome</b> </p>
<br>
<p> $30 Entrance Fee
<br> Doors Open 7:00PM
<br> Headline act is -
<br> Intermission 8:30PM
<br>
<br> <b>Doors Close - 9:30PM</b>
</p>
<div class="card-bottom">
<img id="card-bottom-site2-image" src="img/site2-139x113px.jpg" alt="">
<p class="card-text-bottom">
Premises
<br>Street Address
<br>City
</p>
</div>
</div>
</div>
</div>
CSS:
:root {
--light-blue: rgb(13, 110, 253);
--dark-blue: rgb(52, 73, 94);
--gold: rgb(255, 193, 7);
--black-mine: rgb(33, 36, 41);
--grey: rgb(108, 117, 125);
--white: #ffffff;
--black-pure: #000;
--light-red: rgb(255, 96, 85);
}
.wrapper-pinboard {
margin: 100px auto;
margin-left: 15px;
margin-right: 15px;
max-width: 100%;
}
.wrapper-pinboard .items {
display: flex;
max-width: 100%;
width: 100%;
justify-content: space-around;
}
#year-buttons .button-years {
display: flex;
max-width: 1600px;
width: 100%;
position: absolute;
justify-content: space-around;
top: 315px;
}
.items span {
padding: 7px 7px;
font-size: 18px;
font-weight: 500;
color: #34495e;
border-radius: 50px;
border: 2px solid #34495e;
transition: all 0.3s ease;
min-width: 100px;
text-align: center;
}
#all-btn {
width: 70px;
text-align: center;
}
.items span.active {
color: var(--white);
background: var(--dark-blue);
}
.items span:hover {
color: var(--white);
background: var(--dark-blue);
}
#click-photo {
color: var(--dark-blue);
font-size: 24px;
font-weight: 500;
padding-top: 20px;
text-align: center;
}
#days-clubs-btn {
width: 150px;
height: 30px;
position: absolute;
top: 160px;
left: 50px;
text-decoration: none;
color: #fff;
border: solid .5px var(--grey);
border-radius: 8px;
align-items: center;
justify-content: center;
}
#days-clubs-btn i {
text-align: center;
padding-left: 8px;
padding-top: 10px;
text-decoration: none;
align-items: center;
justify-content: center;
}
.gallery {
display: flex;
flex-wrap: wrap;
margin-top: 30px;
justify-content: space-evenly;
}
.gallery .image {
width: calc(100% / 7);
padding: 7px;
margin: 5px;
height: calc(100% / 3);
border: solid .5px var(--grey);
border-radius: 8px;
background-color: whitesmoke;
box-shadow: 6px 4px 18px;
}
.gallery #site1 {
width: calc(100% / 7);
padding: 10px 5px 10px 5px;
margin: 5px;
height: calc(100% / 3);
border: solid .5px var(--grey);
border-radius: 8px;
background-color: rgb(241, 241, 241);
box-shadow: 6px 4px 18px;
position: relative;
}
.gallery #site2 {
width: calc(100% / 7);
padding: 10px 5px 10px 5px;
margin: 5px;
height: calc(100% / 3);
border: solid .5px var(--grey);
border-radius: 8px;
background-color: rgb(241, 245, 229);
box-shadow: 6px 4px 18px;
position: relative;
}
.gallery #site3 {
width: calc(100% / 7);
padding: 10px 5px 10px 5px;
margin: 5px;
height: calc(100% / 3);
border: solid .5px var(--grey);
border-radius: 8px;
background-color: rgb(220, 220, 220);
box-shadow: 6px 4px 18px;
}
.gallery #site4 {
width: calc(100% / 7);
padding: 10px 5px 10px 5px;
margin: 5px;
height: calc(100% / 3);
border: solid .5px var(--grey);
border-radius: 8px;
background-color: rgb(241, 241, 241);
box-shadow: 6px 4px 18px;
}
.gallery #site5 {
width: calc(100% / 7);
padding: 10px 5px 10px 5px;
margin: 5px;
height: calc(100% / 3);
border: solid .5px var(--grey);
border-radius: 8px;
background-color: rgb(236, 237, 245);
box-shadow: 6px 4px 18px;
}
.gallery #site6 {
width: calc(100% / 7);
padding: 10px 5px 10px 5px;
margin: 5px;
height: calc(100% / 3);
border: solid .5px var(--grey);
border-radius: 8px;
background-color: rgb(236, 237, 245);
box-shadow: 6px 4px 18px;
}
.gallery .image span {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.gallery .image #site1 span {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.gallery .image #site2 span {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.gallery .image #site3 span {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.gallery .image #site4 span {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.gallery .image #site5 span {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.gallery .image #site6 span {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.gallery .image img {
width: 100%;
vertical-align: middle;
border-radius: 8px;
}
.gallery .image #site1 img {
width: 100%;
vertical-align: middle;
}
.gallery .image #site2 img {
width: 100%;
vertical-align: middle;
}
.gallery .image #site3 img {
width: 100%;
vertical-align: middle;
}
.gallery .image #site4 img {
width: 100%;
vertical-align: middle;
}
.gallery .image #site5 img {
width: 100%;
vertical-align: middle;
}
.gallery .image #site6 img {
width: 100%;
vertical-align: middle;
}
.gallery .image.hide {
display: none;
}
.gallery .image.show {
animation: animate 0.4s ease;
width: calc(100% / 8);
height: calc(100% / 3);
border: solid .5px var(--grey);
border-radius: 8px;
position: relative;
}
/* THE DATE */
h4 {
padding-top: 10px;
text-align: center;
font-weight: 500;
font-size: 1rem;
}
/* THE TEXT */
p {
padding-bottom: 20px;
text-align: center;
font-weight: 200;
font-size: 1rem;
}
#pinboard-date {
color: var(--light-blue);
}
#pinboard-day {
color: var(--light-red);
}
#pinboard-text {
color: var(--black-pure);
}
.card-bottom {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
#card-bottom-site1-image {
width: 25%;
padding-top: 20px;
}
#card-bottom-site2-image {
width: 20%;
padding-top: 20px;
}
#card-bottom-site3-image {
width: 40%;
padding-top: 20px;
}
#card-bottom-site4-image {
width: 40%;
padding-top: 20px;
}
#card-bottom-site5-image {
width: 25%;
}
#card-bottom-site6-image {
width: 20%;
}
.card-text-bottom {
display: flex;
flex-direction: column;
font-size: 12px;
}
#card-bottom-apl2-image {
width: 33%;
height: 33%;
}
I've looked at many other questions and answers, but can't figure out why I can't force 100% height on some flexbox columns - i.e., "Genre" with one line of text to match the height of "Song & The Artist" with two lines - while also vertically aligning and centering all text:
Codepen: https://codepen.io/bluedogranch/pen/ZEYXGmx
HTML:
<div class="Rtable Rtable--4cols Rtable--collapse">
<div class="Rtable-cell genre-cell">Genre</div>
<div class="Rtable-cell song-cell">Song<br /><span class="artist">The Artist</span></div>
<div class="Rtable-cell flag-cell">Length</div>
<div class="Rtable-cell link-cell">Link</div>
<div class="Rtable-cell genre-cell">Genre</div>
<div class="Rtable-cell song-cell">Song<br /><span class="artist">The Artist</span></div>
<div class="Rtable-cell flag-cell">Length</div>
<div class="Rtable-cell link-cell">Link</div>
</div>
CSS:
html, body {
min-height: 100%;
margin: 0 auto;
}
.Rtable {
display: flex;
height: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.Rtable-cell, .genre-cell, .song-cell, .flag-cell, .link-cell {
box-sizing: border-box;
flex-grow: 0;
width: 100%;
height: 100%;
padding: 0.5em 0em 0.5em 0em;
overflow: hidden;
list-style: none;
color: #000;
font-size: 12px;
text-align: center;
}
.genre-cell {
width: 20% !important;
font-weight: bold;
}
.song-cell {
width: 40% !important;
}
.flag-cell {
width: 30% !important;
}
.link-cell {
width: 10% !important;
}
.Rtable--4cols > .Rtable-cell {
width: 25%;
}
.Rtable {
position: relative;
top: 1px;
left: 1px;
}
.Rtable-cell {
margin: -1px 0 0 -1px;
border: solid 1px #000000;
}
html, body {
min-height: 100%;
margin: 0 auto;
}
.Rtable {
display: flex;
height: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
margin: 0;
padding: 0;
}
.Rtable-cell, .genre-cell, .song-cell, .flag-cell, .link-cell {
display: flex;
box-sizing: border-box;
justify-content: center;
align-items: center;
width: 100%;
padding: 0.5em 0em 0.5em 0em;
overflow: hidden;
list-style: none;
color: #000;
font-size: 12px;
text-align: center;
}
.genre-cell {
width: 20% !important;
font-weight: bold;
}
.song-cell {
width: 40% !important;
}
.flag-cell {
width: 30% !important;
}
.link-cell {
width: 10% !important;
}
.Rtable--4cols > .Rtable-cell {
width: 25%;
}
.Rtable {
position: relative;
top: 1px;
left: 1px;
}
.Rtable-cell {
margin: -1px 0 0 -1px;
border: solid 1px #000000;
}
<div class="Rtable Rtable--4cols Rtable--collapse">
<div class="Rtable-cell genre-cell">Genre</div>
<div class="Rtable-cell song-cell"><div>Song<br /><span class="artist">The Artist</span></div></div>
<div class="Rtable-cell flag-cell">Length</div>
<div class="Rtable-cell link-cell">Link</div>
<div class="Rtable-cell genre-cell">Genre</div>
<div class="Rtable-cell song-cell"><div>Song<br /><span class="artist">The Artist</span></div></div>
<div class="Rtable-cell flag-cell">Length</div>
<div class="Rtable-cell link-cell">Link</div>
</div>
I am trying to center text inside a parent element of limited width. However the text is set in a large font, which might cause a line-break. However the element line-break does not decrease the width of the element. Is there a way to center a text inside a parent wrapper if the text does not fit?
You can find a failing example in the stack-overflow code sample. The top box has a line-break and should still be centered.
.wrapper {
width: 900px;
margin: 0 auto;
background: lightgrey;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 200px;
border: 1px solid green;
}
.box:nth-child(1) {
background: green;
font-size: 45px;
}
.box:nth-child(2) {
background: orange;
}
<div class="wrapper">
<div class="box"><h3>Lorem Ipsum</h3></div>
<div class="box"><h3>Lorem Ipsum</h3></div>
</div>
Just add the text-align: center;
.wrapper {
width: 900px;
margin: 0 auto;
background: lightgrey;
}
.box {
display: flex;
align-items: center;
justify-content: center;
/* text-align: center; */
width: 300px;
height: 200px;
border: 1px solid green;
}
.box > * {
flex: 0 0 50%;
}
.box:nth-child(1) {
background: green;
font-size: 45px;
}
.box:nth-child(2) {
background: orange;
}
<div class="wrapper">
<div class="box"><h3>Lorem Ipsum</h3></div>
<div class="box"><h3>Lorem Ipsum</h3></div>
</div>
You can use width:min-content; with the first child (https://caniuse.com/#feat=intrinsic-width)
.wrapper {
width: 900px;
margin: 0 auto;
background: lightgrey;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 200px;
border: 1px solid green;
}
.box:nth-child(1) h3 {
width:-webkit-min-content;
width:-moz-min-content;
width:min-content;
border:1px solid;
}
.box:nth-child(1) {
background: green;
font-size: 45px;
}
.box:nth-child(2) {
background: orange;
}
<div class="wrapper">
<div class="box">
<h3>Loreme Ipsum</h3>
</div>
<div class="box">
<h3>Lorem Ipsum</h3>
</div>
</div>
I have the following
setTimeout(function(){
var sections = document.querySelectorAll('section'), main = document.querySelector('.grid-container'),
//section = sections[Math.floor(Math.random() * 3)];
section = sections[1];
section.classList.add('expand');
section.parentElement.classList.add('expand');
main.classList.add('expanding');
}, 2000);
*{
box-sizing : border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.grid-container {
width:100%;
height: 100vh;
display:flex;
border: 1px solid;
flex-wrap: wrap;
flex-direction: column;
}
.grid-row, .grid-container {
overflow:hidden;
}
.grid-column, .grid-row {
display: flex;
transition: width .2s, height .2s, margin .2s, transform .2s;
}
.grid-column {
width: inherit;
height: inherit;
align-items: center;
justify-items: center;
}
.grid-column:nth-child(1) {
background-color:green;
}
.grid-column:nth-child(2) {
background-color:orange;
}
.grid-row:nth-child(2) .grid-column:nth-child(1) {
background-color:violet;
}
.grid-row:nth-child(2) .grid-column:nth-child(2) {
background-color:brown;
}
#media screen and (orientation: portrait) {
.grid-row {
width: 100%;
height: 50%;
flex-direction: column;
}
.grid-column {
width: 100%;
height: 50%;
}
.grid-row.expand .grid-column {
transform: translateY(-50%);
}
}
#media screen and (orientation: landscape) {
.grid-row {
width: 50%;
height: 100%;
}
.grid-column {
width: 50%;
height: 100%;
}
}
#media screen and (min-height: 500px) {
.grid-row {
height: 50%;
width: 100%;
}
}
.expanding .expand {
width: 100% !important;
height: 100% !important;
}
<main class="grid-container">
<div class="grid-row" data-index="1">
<section class="grid-column" data-index="1">
<article>
<p>
1
</p>
</article>
</section>
<section class="grid-column" data-index="2">
<article>
<p>
2
</p>
</article>
</section>
</div>
<div class="grid-row" data-index="2">
<section class="grid-column" data-index="1">
<article>
<p>
3
</p>
</article>
</section>
<section class="grid-column" data-index="2">
<article>
<p>
4
</p>
</article>
</section>
</div>
</main>
that I'm trying to develop where the "cells" in the grid that when expands to full area of the view will animate to as if its "pushing" the adjacent elements out of the view.
I'm trying to use a combination of width, height and transforms to give the appropriate animation but the transforms seem to give some unexpected results...
Is there a way to accomplish this WITHOUT position:absolute or with as little javascript as possible??
Here's an example seemingly doing what you want, coded from scratch, without any JavaScript. I used flexbox instead of grid, but it can be achieved with grid as well. I used :hover as a trigger:
body {
padding: 15px;
background-color: #999;
margin: 0;
}
.grid>*:hover,
.grid>*>*:hover {
flex-grow: 3;
}
.grid>*>*:hover {
box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12);
z-index: 1;
opacity: 1;
font-size: 5rem;
}
.grid:hover>*:not(:hover) {
flex-grow: 0;
max-height: 0;
overflow: hidden;
}
.grid>*,
.grid>*>* {
transition: all .6s cubic-bezier(0.5, 0, 0.3, 1);
}
.grid {
flex-direction: column;
min-height: calc(100vh - 30px);
box-sizing: border-box;
}
.grid,
.grid>* {
display: flex;
max-height: 100%;
}
.grid>* {
flex-direction: row;
margin: 0;
}
.grid>*,
.grid>*>* {
flex-grow: 1;
}
.grid>*>* {
margin: 0;
z-index: 0;
position: relative;
background-color: #fff;
outline: 1px solid #ddd;
opacity: .95;
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
font-size: 3rem;
overflow: hidden;
}
<div class="grid">
<div>
<div>1</div>
<div>2</div>
</div>
<div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</div>
You can play around with flex-grow, change animation or the ratio between hovered and non-hovered elements but, for that, you need to define the requirements better than "seem to give some unexpected results":
You can obviously limit it to 2 + 2 elements. I just wanted to point out it's flexible in terms of structure. Here's an example, expanding to full on both vertical and horizontal:
body {
padding: 15px;
background-color: #999;
margin: 0;
}
.grid>*:hover,
.grid>*>*:hover {
flex-grow: 3;
}
.grid>*>*:hover {
box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12);
z-index: 1;
opacity: 1;
font-size: 5rem;
}
.grid:hover>*:not(:hover) {
flex-grow: 0;
max-height: 0;
overflow: hidden;
}
.grid>*:hover>*:not(:hover) {
flex-grow: 0;
flex-basis: 0;
overflow: hidden;
}
.grid>*,
.grid>*>* {
transition: all .6s cubic-bezier(0.5, 0, 0.3, 1);
}
.grid {
flex-direction: column;
min-height: calc(100vh - 30px);
box-sizing: border-box;
}
.grid,
.grid>* {
display: flex;
max-height: 100%;
}
.grid>* {
flex-direction: row;
margin: 0;
}
.grid>*,
.grid>*>* {
flex-grow: 1;
}
.grid>*>* {
margin: 0;
z-index: 0;
position: relative;
background-color: #fff;
outline: 1px solid #ddd;
opacity: .95;
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
font-size: 3rem;
overflow: hidden;
max-width: 100%;
flex-basis: 100%;
flex-grow: 0;
}
<div class="grid">
<div>
<div>1</div>
<div>2</div>
</div>
<div>
<div>3</div>
<div>4</div>
</div>
</div>
Generally, I'd avoid going full width/full height, as it makes selecting another item way more difficult.