如何動態地將元素添加到div并確保它們都可見

我正在將<div>s on click 動態添加到容器中。但是，當我水平添加三個 div 時，容器只能向右滾動。在左側，div 被截斷。這是一個視頻，您可以在其中看到它。

https://embed.api.video/vod/vi1w8DbshyZaleHsgLvBMT50

.shift-selection-button-wrapper {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  height: 100%;
  width: 50%;
}

.shift-selection-container {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
  margin-top: var(--height-header-line);
  overflow: scroll;
}

.shift-selection-checkmark-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#shift-selection-button-wrapper-time {
  justify-content: center;
}

.shift-selection-shift-time-badge-wrapper {
  position: relative;
}

.shift-selection-shift-time-badge {
  top: -6px;
  position: absolute;
  right: -5px;
  height: 25px;
  width: 25px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  color: white;
  font-weight: bold;
  border-color: white;
  border-style: solid;
  border-width: 1px;
}

.shift-selection-button-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="shift-selection-container">
  <div class="shift-selection-button-wrapper bring-to-front">
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Dog</button>
    </div>
    
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Cat</button>
    </div>
    
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Lion</button>
    </div>
    
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Shark</button>
    </div>
  </div>
  
  <div class="shift-selection-button-wrapper bring-to-front">
    <button class="button">AA</button>
    <button class="button">BB</button>
    <button class="button">CC</button>
  </div>
  
  <div class="shift-selection-button-wrapper bring-to-front" id="shift-selection-button-wrapper-time">
    <div class="shift-selection-shift-time-badge-wrapper">
      <button class="button">1pm</button>
    </div>
    
    <div class="shift-selection-shift-time-badge-wrapper">
      <button class="button">11am</button>
    </div>
    
    <div class="shift-selection-shift-time-badge-wrapper">
      <button class="button">5am</button>
    </div>
  </div>
  
  <div class="shift-selection-button-wrapper bring-to-front">
    <a class="shift-selection-checkmark-wrapper">
      <button class="button">Go!</button>
    </a>
  </div>
</div>

這是標記和 CSS 的一個小技巧，但沒有功能......點擊等背后的邏輯太復雜，無法抽象它......

https://jsfiddle.net/bn2wouzg/17/

為什么 div 會向左截斷？

uj5u.com熱心網友回復：

問題是以下 CSS 行.shift-selection-container：

justify-content: space-evenly;

您可以按如下方式更改它，并且它可以作業：

justify-content: flex-start;

作業示例：

.shift-selection-button-wrapper {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  height: 100%;
  width: 50%;
}

.shift-selection-container {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  margin-top: var(--height-header-line);
  overflow: scroll;
}

.shift-selection-checkmark-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#shift-selection-button-wrapper-time {
  justify-content: center;
}

.shift-selection-shift-time-badge-wrapper {
  position: relative;
}

.shift-selection-shift-time-badge {
  top: -6px;
  position: absolute;
  right: -5px;
  height: 25px;
  width: 25px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  color: white;
  font-weight: bold;
  border-color: white;
  border-style: solid;
  border-width: 1px;
}

.shift-selection-button-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="shift-selection-container">
  <div class="shift-selection-button-wrapper bring-to-front">
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Dog</button>
    </div>
    
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Cat</button>
    </div>
    
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Lion</button>
    </div>
    
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Shark</button>
    </div>
  </div>
  
  <div class="shift-selection-button-wrapper bring-to-front">
    <button class="button">AA</button>
    <button class="button">BB</button>
    <button class="button">CC</button>
  </div>
  
  <div class="shift-selection-button-wrapper bring-to-front" id="shift-selection-button-wrapper-time">
    <div class="shift-selection-shift-time-badge-wrapper">
      <button class="button">1pm</button>
    </div>
    
    <div class="shift-selection-shift-time-badge-wrapper">
      <button class="button">11am</button>
    </div>
    
    <div class="shift-selection-shift-time-badge-wrapper">
      <button class="button">5am</button>
    </div>
  </div>
  
  <div class="shift-selection-button-wrapper bring-to-front">
    <a class="shift-selection-checkmark-wrapper">
      <button class="button">Go!</button>
    </a>
  </div>
</div>

標籤：javascript html css

上一篇：通過最低階javascript洗掉重復的物件陣列

下一篇：UncaughtTypeError:Cannotreadpropertiesofundefined(reading'length')。Jquery中的自動建議