How to dynamically add Elements to div and make sure they are all visible-CodePudding

I am adding <div>s on click dynamically to a container. However, when I have added three divs horizontally, the container is only scrollable to the right. To the left, the divs are cut off. Here is a video where you can see it.

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 >
  <div >
    <div >
      <button >Dog</button>
    </div>
    
    <div >
      <button >Cat</button>
    </div>
    
    <div >
      <button >Lion</button>
    </div>
    
    <div >
      <button >Shark</button>
    </div>
  </div>
  
  <div >
    <button >AA</button>
    <button >BB</button>
    <button >CC</button>
  </div>
  
  <div  id="shift-selection-button-wrapper-time">
    <div >
      <button >1pm</button>
    </div>
    
    <div >
      <button >11am</button>
    </div>
    
    <div >
      <button >5am</button>
    </div>
  </div>
  
  <div >
    <a >
      <button >Go!</button>
    </a>
  </div>
</div>

Here is a fiddle to the mark up and CSS, but without the functionality... The logic behind the clicking etc. is too complex in order to abstract it...

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

Why do the divs get cut off to the left?

CodePudding user response：

The problem was the following CSS-line for .shift-selection-container:

justify-content: space-evenly;

You could change it as follows, and it works:

justify-content: flex-start;

Working example:

.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 >
  <div >
    <div >
      <button >Dog</button>
    </div>
    
    <div >
      <button >Cat</button>
    </div>
    
    <div >
      <button >Lion</button>
    </div>
    
    <div >
      <button >Shark</button>
    </div>
  </div>
  
  <div >
    <button >AA</button>
    <button >BB</button>
    <button >CC</button>
  </div>
  
  <div  id="shift-selection-button-wrapper-time">
    <div >
      <button >1pm</button>
    </div>
    
    <div >
      <button >11am</button>
    </div>
    
    <div >
      <button >5am</button>
    </div>
  </div>
  
  <div >
    <a >
      <button >Go!</button>
    </a>
  </div>
</div>