Как скрыть переполнение встроенных элементов в строке, используя CSS?

Question

У меня есть случай, когда у меня есть несколько фотографий, которые мне нужно отобразить в ряд в ряд друг с другом. Однако, если длина фотографий больше ширины экрана, я хочу, чтобы дополнительные фотографии были скрыты (частично скрыта фотография), а не складывались и автоматически переходили к следующему ряду. Есть ли способ сделать это с помощью css? Это то, что я пытался до сих пор (неверно).

<div class="parent">
    <div class="photo">Photo 1</div>
    <div class="photo">Photo 2</div>
    <div class="photo">Photo 3</div>
    <div class="photo">Photo 4</div>
    <div class="photo">Photo 5</div>
    <div class="photo">Photo 6</div>
</div>

.photo {
    display: inline;
    width: 100px;
    height: 75px;
}

.parent {
  width:400;
  height:100;
  overflow-x:hidden;
}

Answer 1

.photo {
    min-width: 200px;
    height: 75px;
    background-color: red;
    margin-left: 2rem;
}

.parent {
  display: flex;
  width: 400px;
  height: 100px;
  background-color: blue;
  overflow:hidden;

}

Будет скрыто переполнение. Вам просто нужно отрегулировать ширину фотографии по ширине.

Answer 2

1. Использование white-space:nowrap:

.parent {
  width: 400;
  height: 100;
  white-space: nowrap;
  overflow-x: hidden;
}

.photo {
  display: inline-block;
  width: 100px;
  height: 75px;
  background: #0f03
}

<div class="parent">
  <div class="photo">Photo 1</div>
  <div class="photo">Photo 2</div>
  <div class="photo">Photo 3</div>
  <div class="photo">Photo 4</div>
  <div class="photo">Photo 5</div>
  <div class="photo">Photo 6</div>
</div>

с использованием flex:

.photos {
  display: flex;
  width: 400;
  height: 100;
  overflow-x: hidden;
}

.photos > div {
  flex:0 0 auto;
  width: 100px;
  height: 75px;
  border:solid 1px;
}

<div class="photos">
  <div>Photo 1</div>
  <div>Photo 2</div>
  <div>Photo 3</div>
  <div>Photo 4</div>
  <div>Photo 5</div>
  <div>Photo 6</div>
</div>