如何在 flexbox flex-column 类 div 中将高度设置为高于 100%？

Question

我已经创建了一个带有引导程序的网格，并且在其中一个列中我想要一个 div 网格。每个 div 在悬停时都应该变大，并且应该越过周围的。

Div 里面有图片和文字。移动设备上应该有 3 个 div（一个在另一个之上，每个“行”中有一个 div），并且在更大的屏幕上应该有 3 个“行”，其中 3 个 div 内联。我通过在包含前面提到的引导 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 会扩展（隐藏的 div 会显示：块），并且其内容会覆盖 div左侧和底部（我设置了 z-index）而不移动那些周围的 div。 一切都按我的意愿工作，除了在我设置了 flex-column 方向的移动设备上。 div 根本不会向底部扩展，只会在左侧扩展。底部的隐藏 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;
        }
    }
  }

为什么会这样，我怎样才能让它按我的预期工作。 此外，如果您对创建这些 get-bigger-on-hover div 的其他可能解决方案有任何建议，我将非常高兴。

Answer 1

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

这使用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。它可以让您在工作区周围均匀分布图块。