CSSFlexbox：在較小的螢屏上重疊彈性專案的問題

我使用 flexbox 創建了我的自定義時間線，但我在使用較小的螢屏時遇到了問題。當您開始拉伸視窗時，彈性專案開始重疊。你能幫我添加一些空間但不要打破邊界（這是創建時間線）嗎？

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

uj5u.com熱心網友回復：

您已將 flex 容器的高度設定為 100vh。flexbox 只是按照您的要求執行，將所有內容壓縮到一個視窗中。

只需height: 100vh;從.container

標籤：css 弹性盒 重叠 时间线

上一篇：自定義hr元素

下一篇：如何顯示影像一半和滑鼠懸停移動完整影像