#box{
    border: 2px solid black;
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    box-shadow: 0 0 10px gray;
    margin:10px;
}
.column , .row , .column > section> section, .row > section > section{
    margin: 10px;
    padding: 10px;
    border: 2px solid black;
    text-align: center;
    background-color: rgb(255, 255, 255);
}
#box > section > section > section{
    width: 25vw;
    height: 35vh;
}
#box > section > section {
    display: flex;
}
#box > section > section > p {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}
.truecolumn{
    flex-direction: column;
    display: flex;
}
.truerow{
    display: flex;
}
div{
    border: 2px solid black;
    margin: 2px;
    width: 10vw ;
    height: 10vh ;
    font-size: 1.2vw;
    text-align: center;
    align-content: center;
}
p{
    text-align: center;
}
.wrapexample{
    border: 2px solid black;
    padding: 1vw;
    width: 12vw ;
    display: flex;
    flex-flow: row nowrap;
}
.wrapexample:hover{
    flex-flow: row wrap;
}
ul{
    padding-left: 0px;
}
ul > li{
    margin-bottom: 10px;
    border: 1px solid black;
    border-radius: 10px;
    text-align: center;
    padding: 3px;
}
.growexample, .shrinkexample{
    display: flex;
    border: 2px solid black;
    padding: 1vw;
    width: 32vw ;
}
.growexample > p{
    flex-grow: 1 ;
    border: 2px solid black;
    transition: all 1s;
}
.shrinkexample > p{
    flex-shrink: 0 ;
    border: 2px solid black;
    width: 13vw;
    transition: all 1s;
}
.growexample:hover > p:last-child{
    flex-grow: 5;
    transition: all 1s;
}
.shrinkexample:hover > p{
    flex-shrink: 1;
    transition: all 1s;
}
.shrinkexample:hover > p:last-child{
    flex-shrink: 2;
    transition: all 1s;
}