Проблема с высотой родителя в CSS column layout

Question

У меня высота родителя меняется в зависимости от вложенного в дочерний элемент блока с absolute.

Мне нужно чтобы высота была фиксированной и не зависела от скрытого блока.

Вот мой пример кода:

.wrapper {
  width: 600px;
  column-count: 3;
  column-gap: 3%;
  column-width: 30%;
  background-color: rgb(0, 0, 0);
  color: #fff;
}

.child {
  padding: 20px;
  page-break-inside: avoid;
  break-inside: avoid;
  background-color: rgb(255, 193, 26);
  position: relative
}

.child:hover .hidden {
  opacity: 1;
  visibility: visible;
}

.hidden {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  padding: 60px 20px 20px;
  background-color: rgb(255, 193, 26);
}

<div class="wrapper">
  <div class="child">
    <div class="title">
      Заголовок элемента
    </div>
    <div class="hidden">
      За 6 лет более 1 000 клиентов обратились к нам для проведения работы в квартирах, офисах, магазинах, гостиницах, производствах.
    </div>
  </div>
</div>

Answer 1

Скорее всего проблемы из-за использования column-count, column-gap, column-width - вот с использованием flexbox и все работает как Вы задумывали:

.wrapper {
  width: 600px;
  background-color: rgb(0, 0, 0);
  color: #fff;
  
  display: flex;
  justify-content: stretch;
  align-items: stretch;
}

.child {
  flex: 1;
  padding: 20px;
  background-color: rgb(255, 193, 26);
  
  position: relative;
}

.child:hover .hidden {
  opacity: 1;
  visibility: visible;
}

.hidden {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  visibility: hidden;
  padding: 60px 20px 20px;
  background-color: rgb(255, 193, 26);
}

<div class="wrapper">
  <div class="child">
    <div class="title">
      Заголовок элемента
    </div>
    <div class="hidden">
      За 6 лет более 1 000 клиентов обратились к нам для проведения работы в квартирах, офисах, магазинах, гостиницах, производствах.
    </div>
  </div>
  
  <div class="child">
    <div class="title">
      Заголовок элемента
    </div>
    <div class="hidden">
      За 6 лет более 1 000 клиентов обратились к нам для проведения работы в квартирах, офисах, магазинах, гостиницах, производствах.
    </div>
  </div>
  
  <div class="child">
    <div class="title">
      Заголовок элемента
    </div>
    <div class="hidden">
      За 6 лет более 1 000 клиентов обратились к нам для проведения работы в квартирах, офисах, магазинах, гостиницах, производствах.
    </div>
  </div>
</div>

БЛОГ НА HUSL

Проблема с высотой родителя в CSS column layout

Ответы (1 шт):