Bootstrap 4 - Как сохранить боковую панель такой же высоты, как реагирующий квадрат?

Question

У меня есть следующие настройки:
У меня есть поле изображения в качестве адаптивного квадрата с использованием псевдоэлемента :after и padding-bottom: 100%;

Проблема:
Я хочу, чтобы рядом с моим ящиком была боковая панель, которая может содержать любое количество маленьких уменьшенных изображений.Тем не менее, в поведении Bootstrap по умолчанию, меньший из блоков настраивается на больший.Вместо этого я стараюсь, чтобы боковая панель всегда была такой же высоты, как и основные изображения.Если оно больше, содержимое должно вместо этого прокручиваться по вертикали.

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

Мой вопрос:
Как я могу убедиться, что боковая панель получает только максимальную высоту моей квадратной рамки рядом с ней?

https://jsfiddle.net/Sirence/rzx6t8ey/

.row {
  margin-top: 20px;
}

.row>div {
  border: solid 1px #6c757d;
  padding: 10px;
}

img {
  display: block;
  border: 1px solid red;
}

.sidebar>div:not(:last-child) img {
  margin-bottom: 10px;
}

.main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main .wrapper {
  border: 1px solid green;
  position: relative;
}

.main .wrapper:after {
  content: "\00a0";
  display: block;
  padding-bottom: 100%;
  line-height: 0;
}

.main .holder {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.sidebar-wrapper .sidebar {
  height: 100%;
  overflow-y: scroll;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-1 sidebar">
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
    </div>
    <div class="col-2 main">
      <div class="wrapper">
        <div class="holder">
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-1 sidebar">
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
    </div>
    <div class="col-2 main">
      <div class="wrapper">
        <div class="holder">
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
      </div>
    </div>
  </div>
</div>


<div class="container">
  <div class="row">
    <div class="col-1 sidebar-wrapper">
      <div class="sidebar">
        <div class="thumbnail">
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
        <div>
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
        <div>
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
        <div>
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
        <div>
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
        <div>
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
        <div>
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
        <div>
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
      </div>
    </div>
    <div class="col-2 main">
      <div class="wrapper">
        <div class="holder">
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Это определенно возможно только с чистым CSS.Хорошо, предпосылка этого проста.Вы хотите, чтобы ваша строка всегда принимала высоту адаптивного изображения, а , а не длинный список миниатюр, как вы упомянули.

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

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

Затем я добавил второй столбец, в котором будет отображаться основное изображение.,Осталось только добавить стиль начальной загрузки img-fluid , чтобы сделать изображение отзывчивым и вуаля!

Рабочая скрипка здесь: Нажмите здесь

А это код:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<style>
  .container-overrides {
    background: #ccc;
    margin: 20px auto;
    max-width: 500px !important;
  }

  .sidebar {
    position: relative;
    overflow-y: scroll;
    flex: 0 0 50px;
  }

  .sidebar .image-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    bottom: 10px;
  }

  .sidebar img {
    display: block;
    margin: 0 auto 10px;
  }

  .sidebar img:last-of-type {
    margin: 0 auto;
  }
  .main{
    background:#ccc;
  }
  .main img {
    height: auto;
    border: 1px solid red;
  }

</style>

<div class="container p-0 container-overrides">
  <div class="row no-gutters">
    <!-- Responsive Sidebar -->
    <div class="sidebar bg-dark p-2">
      <div class="image-container">
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
      </div>
    </div>
    <!-- Main Image Container -->
    <div class="col p-2 main">
      <img src="https://ih1.redbubble.net/image.393347411.1344/flat,800x800,070,f.jpg" class="img-fluid" />
    </div>
  </div>
</div>