2 divs overlapping when the top one extends with transition-CodePudding

    .flexbox{width:500px;
             height:300px;
             display:-webkit-box;
             display:box;
             flex-wrap:wrap;
             -webkit-box-orientation:vertical;
             box-orientation:vertical;}
    .flexbox>div{-webkit-transition:ease-in;
                 transition:ease-in;
                 -webkit-border-radius:10px;
                 border-radius:10px;
                 border:solid black;
                 width:500px;
                 height:38px;
                 margin:-10px 10px 0px 10px;
                 padding:20px 20px 20px 20px;
                 box-shadow:10px 10px 10px dimgrey;
                 overflow:hidden;}
    .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:400px;color:white;font-weight:bold;}
    .flexbox>div:nth-child(1):hover{background-color:blue;}
    .flexbox>div:nth-child(2):hover{background-color:red;}
    .flexbox>div:nth-child(3):hover{background-color:green;}
    .flexbox>div:nth-child(4):hover{background-color:orange;}
    .multicolumn{-webkit-column-count:3;
                 -webkit-column-gap:30px;
                 -webkit-column-rule:1px black outset;}

       <div >
        <div><p>the first div content<br><br>Once you have mastered the use of topic sentences, you may decide that the topic sentence for a particular paragraph really shouldn’t be the first sentence of the paragraph. This is fine—the topic sentence can actually go at the beginning, middle, or end of a paragraph; what’s important is that it is in there somewhere so that readers know what the main idea of the paragraph is and how it relates back to the thesis of your paper. Suppose that we wanted to start the piranha paragraph with a transition sentence—something that reminds the reader of what happened in the previous paragraph—rather than with the topic sentence. Let’s suppose that the previous paragraph was about all kinds of animals that people are afraid of, like sharks, snakes, and spiders. Our paragraph might look like this (the topic sentence is bold):
                Like sharks, snakes, and spiders, piranhas are widely feared. Although most people consider piranhas to be quite dangerous, they are, for the most part, entirely harmless. Piranhas rarely feed on large animals; they eat smaller fish and aquatic plants. When confronted with humans, piranhas’ first instinct is to flee, not attack. Their fear of humans makes sense. Far more piranhas are eaten by people than people are eaten by piranhas. If the fish are well-fed, they won’t bite humans.</p></div>
        <div><p>the second div content</p></div>
        <div><p>the third div content</p></div>
        <div><p>the fourth div content</p></div>
       </div>
       <br>
       <div >
         <p>whatever text on the first column</p>
         <p>whatever text on the second column</p>
         <p>whatever text on the third column</p>
       </div>

so as you can see, whenever I hover to extend a div flexbox, the multicolumn overlap with the flexbox. I tried adding margin-top and margin-bottom but didn't work. How can I fix this?

CodePudding user response：

You need to remove the fixed height on the .flexbox:

.flexbox {
  width: 500px;
  /*height: 300px;*/
  display: -webkit-box;
  display: box;
  flex-wrap: wrap;
  -webkit-box-orientation: vertical;
  box-orientation: vertical;
}

.flexbox>div {
  -webkit-transition: ease-in;
  transition: ease-in;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: solid black;
  width: 500px;
  height: 38px;
  margin: -10px 10px 0px 10px;
  padding: 20px 20px 20px 20px;
  box-shadow: 10px 10px 10px dimgrey;
  overflow: hidden;
}

.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: 400px;
  color: white;
  font-weight: bold;
}

.flexbox>div:nth-child(1):hover {
  background-color: blue;
}

.flexbox>div:nth-child(2):hover {
  background-color: red;
}

.flexbox>div:nth-child(3):hover {
  background-color: green;
}

.flexbox>div:nth-child(4):hover {
  background-color: orange;
}

.multicolumn {
  -webkit-column-count: 3;
  -webkit-column-gap: 30px;
  -webkit-column-rule: 1px black outset;
}

<div >
  <div>
    <p>the first div content<br><br>Once you have mastered the use of topic sentences, you may decide that the topic sentence for a particular paragraph really shouldn’t be the first sentence of the paragraph. This is fine—the topic sentence can actually
      go at the beginning, middle, or end of a paragraph; what’s important is that it is in there somewhere so that readers know what the main idea of the paragraph is and how it relates back to the thesis of your paper. Suppose that we wanted to start
      the piranha paragraph with a transition sentence—something that reminds the reader of what happened in the previous paragraph—rather than with the topic sentence. Let’s suppose that the previous paragraph was about all kinds of animals that people
      are afraid of, like sharks, snakes, and spiders. Our paragraph might look like this (the topic sentence is bold): Like sharks, snakes, and spiders, piranhas are widely feared. Although most people consider piranhas to be quite dangerous, they are,
      for the most part, entirely harmless. Piranhas rarely feed on large animals; they eat smaller fish and aquatic plants. When confronted with humans, piranhas’ first instinct is to flee, not attack. Their fear of humans makes sense. Far more piranhas
      are eaten by people than people are eaten by piranhas. If the fish are well-fed, they won’t bite humans.</p>
  </div>
  <div>
    <p>the second div content</p>
  </div>
  <div>
    <p>the third div content</p>
  </div>
  <div>
    <p>the fourth div content</p>
  </div>
</div>
<br>
<div >
  <p>whatever text on the first column</p>
  <p>whatever text on the second column</p>
  <p>whatever text on the third column</p>
</div>