Hello, I am trying to edit this code to where the flexbox expands vertically. Ri

ID: 3902890 • Letter: H

Question

Hello,

I am trying to edit this code to where the flexbox expands vertically. Right now, the box itself expands horizontally, while the text expands vertically. I have looked over this for awhile now,so if anyone could help me get this last part - it would be greatly appreciated.

Here is my code for the website:

<!DOCTYPE html>

<html>

<head>

<title>Flexible Box Layout Model</title>

rel = 'stylesheet' type = 'text/css'>

.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: 120px;

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: 250px; overflow: hidden; font-family: "Rosario" }

.flexbox img {

float:left;

margin-left:10px;

}

.flexbox > div{

width:600px;

max-height:100px;

}

</style>

</head>

<body>

<p>Good Programming Practices call attention to techniques that

will help you produce programs that are clearer, more

understandable and more maintainable.</p></div>

<p>Error-Prevention Tips contain suggestions for exposing bugs

and removing them from your programs; many describe aspects of

programming that prevent bugs from getting into programs in

the first place.</p></div>

<p>Common Programming Errors point out the errors that students

tend to make frequently. These Common Programming Errors reduce

the likelihood that you'll make the same mistakes.</p></div>

<div><img src="SEO.png"

alt = "Software engineering observation icon"><p>Software

Engineering Observations highlight architectural and design

issues that affect the construction of software systems,

especially large-scale systems.</p></div>

</div>

</body>

</html>

Explanation / Answer

Following is the answer: