Как я могу установить высоту выше 100% в классе flex-column flexbox?

Question

Я создал сетку с начальной загрузкой, и в одном из столбцов я хотел бы иметь сетку div.Каждый элемент div должен увеличиваться при наведении, и должен охватывать окружающие.

В элементах div есть изображения и текст внутри.На мобильном устройстве должно быть 3 деления (один над другим, по одному в каждой «строке») и 3 «ряда» с 3 делениями на больших экранах.Я добился этого, поместив следующие классы в загрузочный 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 расширяется (скрытые div получают отображение: block), и ANDего содержимое проходит через div слева и снизу (я установил z-index), не перемещая окружающие элементы div.Все работает, как я хотел, за исключением мобильного телефона, где я установил направление flex-столбца.Там дивы просто не расширяются вниз, только слева.Скрытый 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

Если я правильно понял ваш вопрос, вы хотите увеличить размер плитки на месте, не затрагивая компоновку другого. Если да, то я создал небольшую скрипку ЗДЕСЬ .

Используется преобразование 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. Это позволит вам равномерно распределять плитки вокруг вашего рабочего пространства.