CSS Flexbox

[Mereinid]

Hello all, I am trying to get my flex box to extend/stretch vertically when I put my mouse over the Flexbox itself.

I keep adjusting the width/height in the corresponding .flexbox > div & .flexbox >div:hover sections..but I’ll be damned if I can figure out which size of ??px it is that makes them extend vertically. I’ve moved the Heights/Widths up and down and swapped them..to no avail. I am beginning to think my professor is intentionally given me something that is not doable. (just kidding). I can put the whole code in here its 66lines..if that will help. I know its going to be super simple, it usually is and I am overthinking this..lol

(This is the website i have it hosted on for my class, so my professor can see it. http://wmelliott.x10host.com/Fig5_13_Redo/Fig5_13_Redo.html)

.flexbox
 {
    width: 600px;
    height: 420px;
        display: -webkit-box;
        display: box;
   -webkit-box-orient: vertical;
    box-orient: vertical;
}
.flexbox > div
{
-webkit-transition: 1s ease-out;
transition: 1s ease-out;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 2px solid black;
width: 200px;
margin:0px;
padding: 20px 20px 20px 20px;
box-shadow: 10px 10px 10px dimgrey;
}
.flexbox > div:nth-child(1){ background-color: lightgrey; }
.flexbox > div:nth-child(2){ background-color: lightgrey; }
.flexbox > div:nth-child(3){ background-color: lightgrey; }
.flexbox > div:nth-child(4){ background-color: lightgrey; }

.flexbox > div:hover {
width: 200px; color: white; font-weight: bold; }
.flexbox > div:nth-child(1):hover { background-color: royalblue; }
.flexbox > div:nth-child(2):hover { background-color: crimson; }
.flexbox > div:nth-child(3):hover { background-color: crimson; }
.flexbox > div:nth-child(4):hover { background-color: darkgreen; }
p { height: 275px; overflow: hidden; font-family: "Rosario" }

[Paulie_D]

If the code is that small…we’d prefer you use Codepen.io to demonstrate it rather that a random link.

That said, the flexbox syntax you are using is very old. You should use the most up to date version.

Also, I’m not quite clear on what this means…

I am trying to get my flex box to extend/stretch vertically when I put my mouse over the Flexbox itself.

If you’ve set a height it won’t change under flexbox unless you change it…

[Mereinid]

I figured it out, I had to add the term height into the three .flexbox areas and then overflow; hidden command. I got it squared..) http://wmelliott.x10host.com/Fig5_13_Redo/Fig5_13_Redo.html) Here is the code and what I finally got to work after almost 20 hours on it.

.flexbox
{
width: 600px;
height: 400px;
display: -webkit-box;
display: box;
-webkit-box-orient: vertical;
box-orient: vertical;
}
.flexbox > div
{
-webkit-transition: 1s ease-out;
transition: 1s ease-out;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 2px solid black;
width: 120px;
height: 200px;
overflow: hidden;
margin:0px;
padding: 20px 20px 20px 20px;
box-shadow: 10px 10px 10px dimgrey;
}
.flexbox > div:nth-child(1){ background-color: lightgrey; }
.flexbox > div:nth-child(2){ background-color: lightgrey; }
.flexbox > div:nth-child(3){ background-color: lightgrey; }
.flexbox > div:nth-child(4){ background-color: lightgrey; }

.flexbox > div:hover {
height: 375px; color: white; font-weight: bold; }
.flexbox > div:nth-child(1):hover { background-color: royalblue; }
.flexbox > div:nth-child(2):hover { background-color: crimson; }
.flexbox > div:nth-child(3):hover { background-color: crimson; }
.flexbox > div:nth-child(4):hover { background-color: darkgreen; }
p { height: 275px; overflow: hidden; font-family: “Rosario” }

• Unfortunately this is the version I am stuck with using. My university is lazy and wont teach us anything remotely new. And there is no other university near me that I can travel to. So I stuck with a Computer Science degree is that is at least a half a decade or a decade out of date. Nothing makes you feel as warm as spending 60k on an education that will inevitably screw you as you don’t know anything current..haha.

If I thought I could take them to court for my money back I would, in a heart beat. But alas, I hope I can find a job locally with the local army base or the nuclear plant. I have some friends there and I may be able to get on there through that way..
ANYWAY, thank you for your replies. Everyone here have a good evening and luck and loot to you.

Regards,
Mereinid

[Author]

Posts