- A+
I am trying to get my flexbox to resize on mobile devices and window size.
For the life of me I have no idea why it is not working. The flexbox should resize and wrap around to the next row as the browser scales down.
Demo
CSS/HTML
#flex-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: left; width: 1000px; height: 400px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); overflow: hidden; } #left-zone { background: #fff; height: 75%; flex-grow: 0; display: flex; width: 350px; align-items: center; justify-content: left; min-width: 0; } #left-zone .list { display: flex; list-style: none; align-content: stretch; flex-direction: column; /* flex-grow: 1; */ flex: 1 1 calc(33.33% - 20px); margin: 0; padding: 0; } .item input { display: none; } label { display: block; opacity: 0.5; height: 50px; text-align: center; line-height: 50px; } label:hover { opacity: 0.75; cursor: pointer; } /* content slides in on the right side of the flexbox */ .content { position: absolute; left: 350px; top: -400px; width: 650px; height: 400px; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: slideout; animation-name: slideout; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; display: flex; align-items: center; justify-content: center; flex-direction: column; } /* p tag content in the right side of the flexbox */ .content p { max-width: 50%; text-align: center; } #middle-border { background-color: #eee; height: 75%; flex-grow: 1; max-width: 2px; z-index: 0; } /* Right side of flexbox where the content slides in */ #right-zone { background-color: #ff000070; height: 100%; flex-grow: 3; } /* ==========Styles only related to the animation slidein: IGNORE============*/ @-webkit-keyframes slidein { 0% { top: -400px; opacity: 0; } 100% { opacity: 1; top: 0; } } @keyframes slidein { 0% { top: -400px; opacity: 0; } 100% { opacity: 1; top: 0; } } @-webkit-keyframes slideout { 0% { top: 0; opacity: 1; } 100% { top: -400px; opacity: 0; } } @keyframes slideout { 0% { top: 0; opacity: 1; } 100% { top: -400px; opacity: 0; } } input:checked ~ .content { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: slidein; animation-name: slidein; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } body { background: #eee; font-family: Tahoma; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; }<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta charset="utf-8"> <title>Flex Test</title> </head> <body> <div id="flex-container"> <div id="left-zone"> <ul class="list"> <li class="item"> <input type="radio" id="radio_strawberries" name="basic_carousel" checked="checked" /> <label class="label_strawberry" for="radio_strawberries">strawberry</label> <div class="content content_strawberry"> <h1>strawberry</h1> <p>The garden strawberry... blah blah</p> </div> </li> <li class="item"> <input type="radio" id="radio_banana" name="basic_carousel"/> <label class="label_banana" for="radio_banana">banana</label> <div class="content content_banana"> <h1>banana</h1> <p>A banana... blah blah</p> </div> </li> <li class="item"> <input type="radio" id="radio_apple" name="basic_carousel"/> <label class="label_apple" for="radio_apple">apple</label> <div class="content content_apple"> <h1>apple</h1> <p>The apple... blah blah</p> </div> </li> <li class="item"> <input type="radio" id="radio_orange" name="basic_carousel"/> <label class="label_orange" for="radio_orange">orange</label> <div class="content content_orange"> <h1>orange</h1> <p>The orange... blah blah</p> </div> </li> </ul> </div> <div id="middle-border"></div> <div id="right-zone"></div> </div> </body> </html>I would like to make the right side wrap underneath the left side as the browser window resolution gets smaller, but I just can't seem to figure it out.
The content in the right side of the flexbox is hidden and simply slides in from the top using CSS keyframes. I am guessing that this might be an issue since the content div on the right side of the flexbox is essentially empty
CodePen
appreciate any help
Michael_B explains very well the problem here.
In addition to his answer, I'd say only that you are working also with an absolute .content, so your flexbox it is not a "normal" flexbox.
BTW, using your HTML, I tried to make it responsible. The trick is to remove all your fixed width.
Bootstrap is a possible way, but if you have already started your work, you can finish it using only CSS properties and no javascript (as you are doing): CSS have all the credentials to do it, without framework. This is what I think.
I tried not to change your HTML. I removed only <div id="middle-border"></div> 'cause you can create a right border in your #left-zone .list with the help of box-sizing property... and border-right, naturally 
In your CSS, I changed your animation with a more simple opacity and translateY transition (you have to go to point A to point B without another animation so a transition is enough, I think). But, well, it is not an error using an animation, I think only it's more simple use a transition for this work.
Another important think is to use a CSS that provides better cross-browser consistency in the default styling of HTML elements. To do this, I used "normalize.css": https://necolas.github.io/normalize.css/)
This is the code, hope it helps:
body { background: #eee; font-family: Tahoma; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } #flex-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; /* no fixed width */ min-height: 400px; /*add min-height for 1 column layout */ height: 100vh; max-width: 1000px; margin: auto; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); overflow: hidden; flex-direction: column; position: relative; } #left-zone { height: 50%; flex: 0 0 auto; display: flex; width: 100%; } #left-zone .list { display: flex; list-style: none; align-content: stretch; flex-direction: column; flex: 1 1 auto; margin: auto; padding: 0; box-sizing: border-box; } .item input { display: none; } label { display: block; opacity: 0.5; height: 50px; text-align: center; line-height: 50px; position: relative; } label:hover { opacity: 0.75; cursor: pointer; } /* content slides in on the right side of the flexbox */ .content { position: absolute; right: 0; bottom: 0; opacity: 0; transform: translateY(100%); height: 50%; width: 100%; transition: 0.5s ease-out; display: flex; align-items: center; justify-content: center; flex-direction: column; pointer-events: none; } /* p tag content in the right side of the flexbox */ .content p { max-width: 50%; text-align: center; } /* Right side of flexbox where the content slides in */ #right-zone { background-color: #ff8f8f; width: 100%; flex: 1 0 auto; height: 50%; } input:checked ~ .content { transform: translateY(0%); opacity: 1; } @media (min-width:480px){ #flex-container { flex-direction: row; min-height: auto; height: 400px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #left-zone .list { border-right: 2px solid #cccccc; } .content { width: 65%; /* no fixed width */ height: 100%; pointer-events: auto; transform: translateY(-100%); } #left-zone { width: 35%; /* no fixed width */ } #right-zone { height: 100%; width: 65%; /* no fixed width */ } }<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet"> <div id="flex-container"> <div id="left-zone"> <ul class="list"> <li class="item"> <input type="radio" id="radio_strawberries" name="basic_carousel" checked="checked" /> <label class="label_strawberry" for="radio_strawberries">strawberry</label> <div class="content content_strawberry"> <h1>strawberry</h1> <p>The garden strawberry... blah blah</p> </div> </li> <li class="item"> <input type="radio" id="radio_banana" name="basic_carousel"/> <label class="label_banana" for="radio_banana">banana</label> <div class="content content_banana"> <h1>banana</h1> <p>A banana... blah blah</p> </div> </li> <li class="item"> <input type="radio" id="radio_apple" name="basic_carousel"/> <label class="label_apple" for="radio_apple">apple</label> <div class="content content_apple"> <h1>apple</h1> <p>The apple... blah blah</p> </div> </li> <li class="item"> <input type="radio" id="radio_orange" name="basic_carousel"/> <label class="label_orange" for="radio_orange">orange</label> <div class="content content_orange"> <h1>orange</h1> <p>The orange... blah blah</p> </div> </li> </ul> </div> <div id="right-zone"></div> </div>
