Issues with overflow auto and white-space: nowrap and flexbox-CodePudding

I am trying to create a scrollable horizontal timeline with a fixed width. I have overflow-x: auto on the parent container and whenever I add white-space: nowrap to that same element, the child list elements start getting cut off. I assume this is something to do with the behavior of flex-box. I have tried adding min-width: 0 to the flex elements and flex-grow: 1 but no luck.

body {
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  height: 200px;
  width: 500px;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.timeline {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.timeline ol {
  list-style: none;
  display: flex;
  justify-content: center;
}

.timeline .horizontal-line {
  position: relative;
  background-color: #0d6a3d;
  height: 3px;
  border-radius: 4px;
  margin: 5em 0;
}

.event {
  margin: 0px 10px;
  position: relative;
}

.date {
  position: relative;
  text-align: center;
  top: -70px;
  width: 100%;
}

.date::after {
  content: "";
  position: absolute;
  bottom: -28px;
  left: 50%;
  right: auto;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 3px solid #00a950;
  background-color: #fff;
  transition: 0.3s ease;
  transform: translateX(-50%);
}

.content {
  width: 100%;
  text-align: center;
  position: relative;
  top: -45px;
}

<section >
  <div >
    <div >
      <ol>
        <li >
          <h3 >07/02/2020</h3>
          <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li >
          <h3 >08/25/2020</h3>
          <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li >
          <h3 >08/25/2020</h3>
          <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li >
          <h3 >08/25/2020</h3>
          <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li >
          <h3 >08/25/2020</h3>
          <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li >
          <h3 >08/25/2020</h3>
          <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
      </ol>
    </div>
  </div>
</section>

CodePudding user response：

Add width: fit-content; to your timeline. That gets all elements to fit in the horizontal scroll. Then you are left with the default padding-inline-start on the ol. You can remove that gap by setting padding: 0; or padding-inline-start: 0;.

body {
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  height: 200px;
  width: 500px;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.timeline {
  display: flex;
  justify-content: center;
  min-width: 0;
  width: fit-content;
}

.timeline ol {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
}

.timeline .horizontal-line {
  position: relative;
  background-color: #0d6a3d;
  height: 3px;
  border-radius: 4px;
  margin: 5em 0;
}

.event {
  margin: 0px 10px;
  position: relative;
}

.date {
  position: relative;
  text-align: center;
  top: -70px;
  width: 100%;
}

.date::after {
  content: "";
  position: absolute;
  bottom: -28px;
  left: 50%;
  right: auto;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 3px solid #00a950;
  background-color: #fff;
  transition: 0.3s ease;
  transform: translateX(-50%);
}

.content {
  width: 100%;
  text-align: center;
  position: relative;
  top: -45px;
}

<section >
  <div >
    <div >
      <ol>
        <li >
          <h3 >07/02/2020</h3>
          <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li >
          <h3 >08/25/2020</h3>
          <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li >
          <h3 >08/25/2020</h3>
          <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li >
          <h3 >08/25/2020</h3>
          <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li >
          <h3 >08/25/2020</h3>
          <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li >
          <h3 >08/25/2020</h3>
          <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
      </ol>
    </div>
  </div>
</section>