CODEWITHSUNDEEP
htmlcssoverflowinline
Cashew
Cashew

Reputation: 85

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

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;
}

Upvotes: 0

Views: 970

Answers (2)

Khant Min Si Thu
Khant Min Si Thu

Reputation: 338

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

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

}

It will hid overflow U just need to adjust the width of the photo width

Upvotes: 1

Kosh
Kosh

Reputation: 18413

  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>

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

Upvotes: 1

Related Questions