在Flexbox Flex-Polumn类Div中，我如何将高度设置为高于100％的高度

Question

我已经创建了一个带有bootstrap的网格，在其中一列中，我想拥有一个div的网格。每个div都应在悬停的情况下变得更大，并且应该越过周围的div。

divs内部有图像和文字。在移动设备上应有3个DIV(一个在另一个上方，每个"行"中的单个Div(，而在较大的屏幕上则有3个"行"。我已经实现了，通过将以下课程放在前面提到的Bootstrap Div上：Col D-Flex Flex-Column flex-MD-ROW。

<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <p>Place for some other content</p>
    </div>
    <div class="col-lg-9 ">
      <div class="row">
        <div class="col d-flex flex-column flex-md-row justify-content- 
around">
          <div class="image-container">
            <div class="left">
               <img src="./img/flag.png" alt="">                     
            </div>
            <div class="main">
              <img src="some image" alt="">
              <p>Some text</p>                       
            </div>
            <div class="lower">
              <button class="btn">Link me</button>
            </div>
           </div> 
             /* two more .image-container divs */   
         </div>
       </div> 
      /* two more times the same: div.row, div.col.d-flex etc.*/                  
     </div>
   </div>           
 </div>

一个主要要点是：每个带有图像的Div在侧面有两个隐藏的Div，因此当您悬停在Div上时-Div Kindda扩展(隐藏的Divs获取显示：块(，其内容越过Divs on左和底部(我已经设置了z索引(，而没有移动周围的div。 一切都按照我想要的方式工作，除了我设置了弹性柱方向的手机。那里的divs根本不会扩展到底部，而只是在左侧。底部的隐藏div显示了父片内部的悬停，而是在以下较低位置的元素上方吼叫。

scss：

.col-lg-3 {
display: none;
@media only screen and (min-width: 992px) {
    display: flex;
}
}
.image-container {
    margin:15px;   
    width: 250px;
    position: relative;
    .main {
        padding: 0 10px;        
        border: 1px solid black;
    }
    .lower {
        display: none;
        position: absolute;
        background-color: white;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 21%;
        border: 1px solid black;
        border-top: none;
        padding: 0 10%;
        button {
            width: 100%;
            background-color: orange;
            color: white;
        }
    }
    .left {
        display: none;
        position: absolute;
        background-color: gray;
        left: -50px;
        top: 0;
        height: 100%;
        width: 50px;
        border: 1px solid black;
        border-right: none;
        img {
            width: 50%;
            margin: auto;
        }
    }
    &:hover {
        z-index:1;
        height: 115%;
        .lower, .left {
            display: block;
        }
    }
  }

为什么会发生这种情况，以及我如何按照我的意图进行工作。 另外，我很高兴听到您是否对其他可能创建这些持续持续的divs的解决方案有建议。

Answer 1

如果我正确理解了您的问题，您是否希望在不影响他人布局的情况下增加就地的大小。如果是，那么我在这里创建了一个小小提琴。

这使用flexbox和scale转换来增加就地的瓷砖的大小。

.container {
  width: 600px;
  height: 400px;
  background-color: #eee;
  border: 1px solid #aaa;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tile {
  border: 1px solid #888;
  height: 190px;
  width: 190px;
}
.tile:hover {
  transform: scale(1.3);
}

<div class="container">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

更好的方法是使用CSS grids。它将使您能够在工作区周围均匀散布瓷砖。