I created my custom timeline using flexbox, but I have problem with smaller screens. When you start stretching the window, flex items starts overlap. Could you please help me add some space but dont break the border (which is creating the timeline)?

:root{
  --image-url: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80";
}

*,
*::before,
*::after{
  margin : 0;
  padding: 0;
  box-sizing: inherit;
}

body{
  box-sizing: content-box;
  font-size: 62.5%;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height : 100vh;
  background-image: 
    linear-gradient(
      to right top,
      rgba(13, 13, 13, .75),
      rgba(13, 13, 13, 1)
    ),
    url("https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.timeline-row{
  font-size: 1.2rem;
  display: flex;
  min-width: 25%;
  min-height: 5rem; 
  color: #fff;
}

.timeline-item{
  flex:1;
  display: flex;
  align-items: center;

  &--date{
    border-right: 1px solid currentColor;
    justify-content: flex-end;
  }
  
  &--content{
    border-left: 1px solid currentColor;
    position: relative;
    justify-content: center;
    
    &::before{
      content: "";
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      background-color:currentColor;
      position: absolute;
      top: 50%;
      left: -.55rem;
      transform: translateY(-50%);
    }
  }
}

.row-content{
  margin: .5rem 2rem;
  padding: .75rem;
  background-color: rgba(67, 85, 115, .35);
  border-radius: 15px;
}

<link href="https://fonts.googleapis.com/css2?family=Zen Kaku Gothic Antique:wght@300&family=Zen Kaku Gothic New:wght@300;400;500&display=swap" rel="stylesheet">

<div class="container">
  <div class="timeline-row">
    <div class="timeline-item timeline-item--date">
      <div class="row-content">2019</div>
    </div>
    <div class="timeline-item timeline-item--content">
      <div class="row-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel posuere magna. Morbi molestie odio eget quam rutrum, non volutpat dolor pharetra. Aliquam pretium condimentum est eu fermentum. Nulla dapibus tellus in leo aliquet aliquet. Vestibulum tempor est in.</div>
    </div>
  </div>
    <div class="timeline-row">
    <div class="timeline-item timeline-item--date">
      <div class="row-content">2020</div>
    </div>
    <div class="timeline-item timeline-item--content">
      <div class="row-content">Quisque ut justo est. Donec pulvinar viverra neque a cursus. Etiam a nunc sed dui posuere facilisis. Phasellus ut est rutrum, dignissim lorem ac, maximus mauris. Phasellus consequat lorem non urna luctus, in efficitur justo sagittis. Fusce iaculis congue rutrum. Sed vehicula.</div>
    </div>
  </div>
    <div class="timeline-row">
    <div class="timeline-item timeline-item--date">
      <div class="row-content">2021</div>
    </div>
    <div class="timeline-item timeline-item--content">
      <div class="row-content">Nunc et volutpat felis, ac rutrum turpis. Nullam id sollicitudin eros. Mauris dictum nibh in lorem pharetra, id feugiat tortor tempus. Integer gravida erat nec odio lobortis fringilla. Duis at auctor tortor, eget consectetur risus. Vivamus sit amet hendrerit metus, at rutrum magna.</div>
    </div>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You have set the height of your flex container to 100vh. flexbox just does what you ask, squashing everything to fit in one window.

Just remove height: 100vh; from .container