如何固定这个水平手风琴中第四张幻灯片的宽度？

Question

此水平手风琴中的幻灯片 1-3 效果很好，但是当您单击第四张幻灯片时，您将看到文本滑过空白区域并就位。背景也比幻灯片 1-3 稍小。我尝试了一些更改，但文本会展开到位，我希望它保持现在的静态状态。

我认为这与容器宽度有关，但即使当我将容器变大时，第四个面板仍然首先扫过那一点空白，并且背景仍然比幻灯片的其余部分小。

这是我的代码 - 如有任何建议，我们将不胜感激！

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Darker+Grotesque:[email protected]&family=Vina+Sans&display=swap" rel="stylesheet">

<style>
      
    
  .holder {
  max-width: 640px;
  height: 450px;    
}
    
.slide__content {
  padding: 50px;
}
    
    .slide__content p {
  width: 300px;
}

    .slide__content h2 {
  width: 600px;
}    
    
#slide1 button {
  background: #FFC8FD;
}    
    
#slide2 button {
  background: #FDC9B2;
}
    
#slide3 button {
  background: #E4E0A4;
}  
  
#slide4 button {
  background: #FFC8FD;
}     
    
/*EDIT DESKTOP LAYOUT*/ 
@media screen and (min-width: 1024px) {  
    .holder h2 {
        font-family:arial;
        color:#CD8039;
        font-size:30px;
    }

    .holder p {
        font-family:darker grotesque;
        font-size:17px;
        padding:0px 200px 0px 0px;
    }    
        
.slides {
  display: flex;
  flex-direction: row;
  background: #FFF0E9;
  height: 100%;
  margin: 0;
  padding: 0;
    }
   
.slide {
  display: flex;
  width: 75px;
  overflow: hidden;
  flex-shrink: 0;
   transition: width 0.5s ease;    
    }   
      
.selected {
  width: calc(100% - 150px);
    }
     
.slide button {
  height: 100%;
  cursor: pointer;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  border-style: solid;
  border-width:1px;
    border-color:#fff;
  width: 75px;
  display: flex;
    }
    
 .slide button span {
  font-family:vina sans;
    color:#CD8039;
    font-size:50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom:-30px;  
  width: 450px;
  text-align: left;
  transform: rotate(-90deg);
  transform-origin: top left;
    }
    } 
    
/*EDIT MOBILE*/
@media screen and (max-width:640px) { 
    
.slides {
        display: flex;
        flex-direction: column;
        background: #FFF0E9;
        height: auto;
        margin: 0;
        padding: 0;
    
    }   
    
.slide button span {
        font-family: vina sans;
        color: #CD8039;
        font-size: 20px;
        text-align: center;
        flex-grow: 1;
    
    }
     
.slide {
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: hidden;
        flex-shrink: 0;
    
    }
         
.selected {
  height: auto;
    
    }
   
.slide button {
        cursor: pointer;
        flex-direction: row;
        border-style: solid;
        border-width: 1px;
        border-color: #fff;
        width: 100%;
        display: flex;
    
    }
    

    .holder h2 {
        font-family:arial;
        color:#CD8039;  
        font-size:20px;
        width:100%;
    }

    .holder p {
        font-family:darker grotesque;
        font-size:17px;
        width:100%;
    } 
 
        .slide button {
            height: auto;
            flex-direction: column;
            align-items: flex-start;
            
        }

        .slide button span {
            font-size: 40px;
            padding: 10px;
            text-align: left;
            
        }

        .slide__content {
            padding: 20px;
            
        }
    }
</style>

<div class="holder">
  <div class="slides">
    <div id="slide1" class="slide selected">
      <button onclick="selectSlide(1)">
        <span>Item 1 </span>

      </button>
      <div class="slide__content">
        <h2>Item 1 content</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div id="slide2" class="slide">
      <button onclick="selectSlide(2)">
        <span>Item 2</span>
      </button>
        
      <div class="slide__content">
        <h2>Item 2 content</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
      
    <div id="slide3" class="slide">
      <button onclick="selectSlide(3)">
        <span>Item 3</span>
      </button>
      <div class="slide__content">
        <h2>Item 3 content</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
     
      
        <div id="slide4" class="slide">
      <button onclick="selectSlide(4)">
        <span>Item 4</span>
      </button>
      <div class="slide__content">
        <h2>Item 4 content</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>  
      
      
  </div>
</div>

<script>
  function selectSlide(selectedIndex) {
    const slides = document.querySelectorAll('.slide');
    slides.forEach((slide, index) => {
      if (index + 1 === selectedIndex) {
        slide.classList.add('selected');
      } else {
        slide.classList.remove('selected');
      }
    });
  }
</script>

Answer 1

对于未来的读者：

该问题已由“Timur”解决。

尝试从

flex-shrink: 0

类中删除

.slide

，或设置为 1。