Prevent div from stretching?

Question

.page {
  margin: 10px auto;
  max-width: 500px;
}

.grid {
  display: grid;
  grid-template-columns: 100px auto;
  grid-gap: 10px;
  margin: 0 10px;
}

.sidebar {
  border: 1px solid green;
}

.widget {
  border: 1px solid red;
}

.timeline {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  background-color: white;
}

.timebar {
  width: 1000px;
}

<div class="page">
  <div class="grid">
    <div class="sidebar">sidebar</div>
    <div class="main">
      <div class="widget">
        <div class="timeline">
          <div class="timebar">5pm</div>
        </div>
      </div>
    </div>
  </div>
</div>

How can I prevent the .timeline from stretching the .widget?

The timeline has overflow-x: scroll on it; I was hoping that would allow the content to scroll instead of stretching the parent div. How can I fix this?

`min-width: 0;` to main element – Temani Afif Jul 20 '19 at 19:33 — Temani Afif, Jul 20 '19 at 19:33

score -1 · Answer 1 · answered Jul 20 '19 at 19:36

-1

Try to set a max-width to the .timeline

answered Jul 20 '19 at 19:36

Joseph Davidson

77
4

Didn't downvote, but adding `max-width: 100%` to `.timeline `doesn't help. I did post executable code so you can try stuff before making an answer :-) – mpen Jul 20 '19 at 20:01

Prevent div from stretching?

1 Answers1