0

I am trying to create a simple scrolling parent div. in which child div should be stacked horizontally.

slackblitz

But it is not working. child divs are wrapped after div width end. Please help.

#outerContainer {
      width: 100%;
      height: 150px;
      background: red;
      overflow: hidden;
      overflow-x: scroll;
    }
    
    .card {
      float: left;
      display: inline-block;
      width: 100px;
      height: 150px;
      margin-right: 10px;
      background: #fff;
    }

       
<div id="outerContainer">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
      </div>

4
  • After opening your stackblitz all I see in rendered space is 'Welcome to Ionic' website. Where problem is visible? Commented Jun 27, 2018 at 6:10
  • Click on the "About" @AndrzejZiółek Commented Jun 27, 2018 at 6:11
  • Plz click on about tab Commented Jun 27, 2018 at 6:12
  • @raju what so you exactly want? Commented Jun 27, 2018 at 6:12

3 Answers 3

3
#outerContainer {
  width: 100%;
  height: 150px;
  background: red;
  overflow: hidden;
  overflow-x: scroll;
  white-space:nowrap;
}

.card {
  display: inline-block;
  width: 100px;
  height: 150px;
  margin-right: 10px;
  background: #fff;
}
Sign up to request clarification or add additional context in comments.

Comments

1

Just remove float:left; from .card class and add white-space:nowrap; in #outerContainer

#outerContainer {
  width: 100%;
  height: 150px;
  background: red;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
}

.card {
  display: inline-block;
  width: 100px;
  height: 150px;
  margin-right: 10px;
  background: #fff;
}
<div id="outerContainer">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

1 Comment

Outer container is 100% wide
0

#outerContainer {
  width: 100%;
  height: 150px;
  background: red;
  overflow: hidden;
  overflow-x: scroll;
  display: flex;
}

.card {
  min-width: 100px;
  height: 150px;
  margin-right: 10px;
  background: #fff;
}
<div id="outerContainer">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

Your card elements go to second row. flex can make it a bit easier.

1 Comment

Adding a working demo that fixes the issue is always a good option there's an option to add code snippet above the text area where you've added your answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.