How to hide overflow of inline elements in a row using CSS?

Question

I have a case where I have multiple photos that I need to display in a row inline with each other. However if the length of the photos is greater than the screen width, I want the extra photos to be hidden (a photo being partially hidden is fine too) instead of them stacking and moving to the next row automatically. Is there a possible way to do this using css? This is what I tried so far (incorrect).

<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

1. Using 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>

2. using 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>