CSS Flexbox：在小屏幕上重叠弹性项目的问题

Question

我使用 flexbox 创建了自定义时间轴，但我在较小的屏幕上遇到了问题。当您开始拉伸 window 时，弹性项目开始重叠。你能帮我添加一些 space 但不要打破边界（这是创建时间线）吗？

: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>

Answer 1

您已将弹性容器的高度设置为 100vh。 flexbox 只是按照你的要求去做，把所有东西都压缩成一个 window.

只需从 .container

中删除 height: 100vh;

CSS Flexbox：在小屏幕上重叠弹性项目的问题

CSS Flexbox : problem with overlaping flex items on smaller screens

css

flexbox

overlap

timeline