Переполнение скрытого изображения - PullRequest
Новая
       5

Переполнение скрытого изображения

0 голосов
/ 13 сентября 2018

Кажется, я не могу понять, как работает функция переполнения.

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

<html>

<head>
  <title></title>
</head>

<body>
  <style type="text/css">
    .flex-container-row {
      display: flex;
      min-height: 500px;
    }
    
    .flex-container-column {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 200px;
    }
    
    .flex-item-1 {
      flex: 1;
    }
    
    .flex-item-2 {
      flex: 2;
    }
  </style>
  <div class="flex-container-row" style="background-color: #efefef; max-height: 500px;">
    <div class="flex-item-1" style="overflow: hidden;"><img src="https://via.placeholder.com/1588x794" style="height: 100%;" /></div>

    <div class="flex-container-column">
      <div class="flex-item-1" style="background-color: #3f3f3f;">
        <p>Hej</p>
      </div>

      <div class="flex-item-1" style="background-color: #c99494;">
        <p>Hej</p>
      </div>
    </div>
  </div>
</body>

</html>

Было бы очень полезно, если бы вы могли объяснить мне, что не так?

...