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

Question

我已经使用 bootstrap 创建了一个网格，并且我希望在其中一列中有一个 div 网格。每个 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 得到显示: block )，并且其内容会覆盖 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;
        }
    }
  }

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

Answer 1

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

这使用 flexbox 和 scale 转换来增加 tile 的大小。

.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。它将允许您在工作区周围均匀地隔开磁贴。