Как остановить переполнение элемента с CSS?

Question

У меня есть значок SVG (Font Awesome), который постоянно переполняется и поднимается над моей панелью навигации. Я пытался overflow: hidden;, но это ничего не изменило. Пожалуйста, помогите мне понять и исправить проблему.

ОБНОВЛЕНИЕ № 1:

Что-то я заметил, что если я не установлю position (по умолчанию static), то это ведет себя как обычно. Но мне нужно установить position на relative, так как я использую свойство right для выравнивания элемента. Я также заметил, что изменение позиции на что-либо с stati c создает проблему.

Структура HTML-

<div class="collapsible-card">
  <div class="collapsible-card-title">
    <img src="https://yt3.ggpht.com/a/AATXAJzlZzr16izsGHBCHIkO3H7n-UiHyZPCJFEPiQ=s88-c-k-c0xffffffff-no-rj-mo" class="unselectable" alt="Youtuber's Logo">
    <h5>PewDiePie</h5>
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14 drop-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
      <path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z">
      </path>
    </svg>
 </div>
 <div class="collapsible-card-item-container" style="display: block; max-height: 1140px;">
  <div class="collapsible-card-items">
    <a href="https://www.youtube.com/watch?v=8HHZiNdrZGA" target="_blank"> 
      <img src="https://i.ytimg.com/vi/8HHZiNdrZGA/mqdefault.jpg" alt="Video's Thumbnail">
      <div class="collapsible-card-item-info-container">
         <h3>I Made The WORST Minecraft MISTAKE There Is. .. - Part 40</h3>
         <span>2020-03-13</span>
       </div>
     </a>
   </div>
   <div class="collapsible-card-items">
     <a href="https://www.youtube.com/watch?v=1B1f9PGLbIs" target="_blank"> 
       <img src="https://i.ytimg.com/vi/1B1f9PGLbIs/mqdefault.jpg" alt="Video's Thumbnail">
       <div class="collapsible-card-item-info-container">
         <h3>I'm Back in Minecraft! - Part 39</h3>
         <span>2020-03-06</span>
       </div>
     </a>
   </div>
   <div class="collapsible-card-items">
     <a href="https://www.youtube.com/watch?v=WS54qL3GeaI" target="_blank"> 
       <img src="https://i.ytimg.com/vi/WS54qL3GeaI/mqdefault.jpg" alt="Video's Thumbnail">
       <div class="collapsible-card-item-info-container">
         <h3>Subnautica Part 1 (OMG GAME)</h3>
         <span>2020-03-15</span>
        </div>
      </a>
    </div>
    <div class="collapsible-card-items">
      <a href="https://www.youtube.com/watch?v=fq_rzA3RAmY" target="_blank">
        <img src="https://i.ytimg.com/vi/fq_rzA3RAmY/mqdefault.jpg" alt="Video's Thumbnail">
        <div class="collapsible-card-item-info-container">
          <h3>Worst TIMING I've EVER HAD in a videogame.......</h3>
          <span>2020-03-20</span>
        </div>
      </a>
    </div>
    <div class="collapsible-card-items">
       <a href="https://www.youtube.com/watch?v=Lq8QxKnN_5I" target="_blank">
         <img src="https://i.ytimg.com/vi/Lq8QxKnN_5I/mqdefault.jpg" alt="Video's Thumbnail">
         <div class="collapsible-card-item-info-container">
           <h3>LOST my HAIR, When Hearing New Meme Music! [MEME REVIEW] ? ?#76</h3>
           <span>2020-03-03</span>
         </div>
       </a>
    </div>
    <div class="collapsible-card-items">
      <a href="https://www.youtube.com/watch?v=K2i-fPWWy4A" target="_blank">
        <img src="https://i.ytimg.com/vi/K2i-fPWWy4A/mqdefault.jpg" alt="Video's Thumbnail">
        <div class="collapsible-card-item-info-container">
          <h3>Video flagged for: False Information  [MEME REVIEW] ? ?#73</h3>
          <span>2019-12-20</span>
        </div>
      </a>
    </div>
  </div>
</div>

CSS -

.collapsible-card {
  background-color: #353638;
  margin: 0 5px 20px 5px;
  border-radius: 20px;

  transition: display 1.5s ease-in-out;
}

.collapsible-card-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 2.75em;
  cursor: pointer;
  /* background-color: rgb(107, 218, 74); */
}

.collapsible-card-title svg {
  overflow: hidden !important;
  color: #ff304f;
  margin-left: auto;
  position: relative;
  right: 25px;
}

.collapsible-card-title img {
  width: 88px;
  height: 88px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  margin-right: 20px;
}

.collapsible-card-items a {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 1.5em;
  background-color: #2d2f31;
  margin-bottom: 10px;
}

.collapsible-card-item-info-container {
  margin-left: 20px;
}

.collapsible-card-item-container {
  display: none;
  overflow: hidden;
  max-height: 0;
  background-color: #262729;
  transition: max-height 0.35s ease-in-out;
}

.collapsible-card {
      background-color: #353638;
      margin: 0 5px 20px 5px;
      border-radius: 20px;
    
      transition: display 1.5s ease-in-out;
    }
    
    .collapsible-card-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 2.75em;
      cursor: pointer;
      /* background-color: rgb(107, 218, 74); */
    }
    
    .collapsible-card-title svg {
      overflow: hidden !important;
      color: #ff304f;
      margin-left: auto;
      position: relative;
      right: 25px;
    }
    
    .collapsible-card-title img {
      width: 88px;
      height: 88px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      margin-right: 20px;
    }
    
    .collapsible-card-items a {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 1.5em;
      background-color: #2d2f31;
      margin-bottom: 10px;
    }
    
    .collapsible-card-item-info-container {
      margin-left: 20px;
    }
    
    .collapsible-card-item-container {
      display: none;
      overflow: hidden;
      max-height: 0;
      background-color: #262729;
      transition: max-height 0.35s ease-in-out;
    }

<div class="collapsible-card"><div class="collapsible-card-title">
  <img src="https://yt3.ggpht.com/a/AATXAJzlZzr16izsGHBCHIkO3H7n-UiHyZPCJFEPiQ=s88-c-k-c0xffffffff-no-rj-mo" class="unselectable" alt="Youtuber's Logo">
  <h5>PewDiePie</h5>
  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14 drop-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
	<path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z">
	</path>
  </svg>
</div>
<div class="collapsible-card-item-container" style="display: block; max-height: 1140px;">
  <div class="collapsible-card-items">
	<a href="https://www.youtube.com/watch?v=8HHZiNdrZGA" target="_blank"> 
	  <img src="https://i.ytimg.com/vi/8HHZiNdrZGA/mqdefault.jpg" alt="Video's Thumbnail">
	  <div class="collapsible-card-item-info-container">
		 <h3>I Made The WORST Minecraft MISTAKE There Is. .. - Part 40</h3>
		 <span>2020-03-13</span>
	   </div>
	 </a>
   </div>
   <div class="collapsible-card-items">
	 <a href="https://www.youtube.com/watch?v=1B1f9PGLbIs" target="_blank"> 
	   <img src="https://i.ytimg.com/vi/1B1f9PGLbIs/mqdefault.jpg" alt="Video's Thumbnail">
	   <div class="collapsible-card-item-info-container">
		 <h3>I'm Back in Minecraft! - Part 39</h3>
		 <span>2020-03-06</span>
	   </div>
	 </a>
   </div>
   <div class="collapsible-card-items">
	 <a href="https://www.youtube.com/watch?v=WS54qL3GeaI" target="_blank"> 
	   <img src="https://i.ytimg.com/vi/WS54qL3GeaI/mqdefault.jpg" alt="Video's Thumbnail">
	   <div class="collapsible-card-item-info-container">
		 <h3>Subnautica Part 1 (OMG GAME)</h3>
		 <span>2020-03-15</span>
		</div>
	  </a>
	</div>
	<div class="collapsible-card-items">
	  <a href="https://www.youtube.com/watch?v=fq_rzA3RAmY" target="_blank">
		<img src="https://i.ytimg.com/vi/fq_rzA3RAmY/mqdefault.jpg" alt="Video's Thumbnail">
		<div class="collapsible-card-item-info-container">
		  <h3>Worst TIMING I've EVER HAD in a videogame.......</h3>
		  <span>2020-03-20</span>
		</div>
	  </a>
	</div>
	<div class="collapsible-card-items">
	   <a href="https://www.youtube.com/watch?v=Lq8QxKnN_5I" target="_blank">
		 <img src="https://i.ytimg.com/vi/Lq8QxKnN_5I/mqdefault.jpg" alt="Video's Thumbnail">
		 <div class="collapsible-card-item-info-container">
		   <h3>LOST my HAIR, When Hearing New Meme Music! [MEME REVIEW] ? ?#76</h3>
		   <span>2020-03-03</span>
		 </div>
	   </a>
	</div>
	<div class="collapsible-card-items">
	  <a href="https://www.youtube.com/watch?v=K2i-fPWWy4A" target="_blank">
		<img src="https://i.ytimg.com/vi/K2i-fPWWy4A/mqdefault.jpg" alt="Video's Thumbnail">
		<div class="collapsible-card-item-info-container">
		  <h3>Video flagged for: False Information  [MEME REVIEW] ? ?#73</h3>
		  <span>2019-12-20</span>
		</div>
	  </a>
	</div>
  </div>
</div>

Answer 1

Проблема в том, что вы не устанавливали svg изображение height width, я установил его на 20px вы можете изменить его в соответствии с вашими требованиями

Повторное использование z-index:1111 на вашем header/nav сделать вас svg значок за заголовком

.collapsible-card {
      background-color: #353638;
      margin: 0 5px 20px 5px;
      border-radius: 20px;
    
      transition: display 1.5s ease-in-out;
    }
    
    .collapsible-card-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 2.75em;
      cursor: pointer;
      /* background-color: rgb(107, 218, 74); */
    }
    
    .collapsible-card-title svg {
      overflow: hidden !important;
      color: #ff304f;
      margin-left: auto;
      margin-right: 25px;
      width: 20px;
    height: 20px;
    }
    
    .collapsible-card-title img {
      width: 88px;
      height: 88px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      margin-right: 20px;
    }
    
    .collapsible-card-items a {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 1.5em;
      background-color: #2d2f31;
      margin-bottom: 10px;
    }
    
    .collapsible-card-item-info-container {
      margin-left: 20px;
    }
    
    .collapsible-card-item-container {
      display: none;
      overflow: hidden;
      max-height: 0;
      background-color: #262729;
      transition: max-height 0.35s ease-in-out;
    }

<div class="collapsible-card"><div class="collapsible-card-title">
  <img src="https://yt3.ggpht.com/a/AATXAJzlZzr16izsGHBCHIkO3H7n-UiHyZPCJFEPiQ=s88-c-k-c0xffffffff-no-rj-mo" class="unselectable" alt="Youtuber's Logo">
  <h5>PewDiePie</h5>
  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14 drop-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
	<path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z">
	</path>
  </svg>
</div>
<div class="collapsible-card-item-container" style="display: block; max-height: 1140px;">
  <div class="collapsible-card-items">
	<a href="https://www.youtube.com/watch?v=8HHZiNdrZGA" target="_blank"> 
	  <img src="https://i.ytimg.com/vi/8HHZiNdrZGA/mqdefault.jpg" alt="Video's Thumbnail">
	  <div class="collapsible-card-item-info-container">
		 <h3>I Made The WORST Minecraft MISTAKE There Is. .. - Part 40</h3>
		 <span>2020-03-13</span>
	   </div>
	 </a>
   </div>
   <div class="collapsible-card-items">
	 <a href="https://www.youtube.com/watch?v=1B1f9PGLbIs" target="_blank"> 
	   <img src="https://i.ytimg.com/vi/1B1f9PGLbIs/mqdefault.jpg" alt="Video's Thumbnail">
	   <div class="collapsible-card-item-info-container">
		 <h3>I'm Back in Minecraft! - Part 39</h3>
		 <span>2020-03-06</span>
	   </div>
	 </a>
   </div>
   <div class="collapsible-card-items">
	 <a href="https://www.youtube.com/watch?v=WS54qL3GeaI" target="_blank"> 
	   <img src="https://i.ytimg.com/vi/WS54qL3GeaI/mqdefault.jpg" alt="Video's Thumbnail">
	   <div class="collapsible-card-item-info-container">
		 <h3>Subnautica Part 1 (OMG GAME)</h3>
		 <span>2020-03-15</span>
		</div>
	  </a>
	</div>
	<div class="collapsible-card-items">
	  <a href="https://www.youtube.com/watch?v=fq_rzA3RAmY" target="_blank">
		<img src="https://i.ytimg.com/vi/fq_rzA3RAmY/mqdefault.jpg" alt="Video's Thumbnail">
		<div class="collapsible-card-item-info-container">
		  <h3>Worst TIMING I've EVER HAD in a videogame.......</h3>
		  <span>2020-03-20</span>
		</div>
	  </a>
	</div>
	<div class="collapsible-card-items">
	   <a href="https://www.youtube.com/watch?v=Lq8QxKnN_5I" target="_blank">
		 <img src="https://i.ytimg.com/vi/Lq8QxKnN_5I/mqdefault.jpg" alt="Video's Thumbnail">
		 <div class="collapsible-card-item-info-container">
		   <h3>LOST my HAIR, When Hearing New Meme Music! [MEME REVIEW] ? ?#76</h3>
		   <span>2020-03-03</span>
		 </div>
	   </a>
	</div>
	<div class="collapsible-card-items">
	  <a href="https://www.youtube.com/watch?v=K2i-fPWWy4A" target="_blank">
		<img src="https://i.ytimg.com/vi/K2i-fPWWy4A/mqdefault.jpg" alt="Video's Thumbnail">
		<div class="collapsible-card-item-info-container">
		  <h3>Video flagged for: False Information  [MEME REVIEW] ? ?#73</h3>
		  <span>2019-12-20</span>
		</div>
	  </a>
	</div>
  </div>
</div>

Answer 2

Если я правильно понял ваше требование, то вы хотите, чтобы svg был справа?

Размер используемого вами svg больше, чем вам нужно, поэтому вам нужно предоставить height и width для того же, для понимания цели я добавил границу white. Вы можете go вперед и удалить эту границу и установить свои собственные height и width, и вы все установите.

используйте z-index:1 (или большее целое число, я предполагаю, что * 1012 нет * элемент, используемый для заголовка) в заголовке blue , поэтому значок останется под header.

.collapsible-card {
  background-color: #353638;
  margin: 0 5px 20px 5px;
  border-radius: 20px;
  transition: display 1.5s ease-in-out;
}

.collapsible-card-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 2.75em;
  cursor: pointer;
  /* background-color: rgb(107, 218, 74); */
}

.collapsible-card-title svg {
  height: 50px; /* use your desired height as per your requirement */
  color: #ff304f;
  margin-left: auto;
  position: relative;
  right: 25px;
  border:1px solid white;
}

.collapsible-card-title img {
  width: 88px;
  height: 88px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  margin-right: 20px;
}

.collapsible-card-items a {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 1.5em;
  background-color: #2d2f31;
  margin-bottom: 10px;
}

.collapsible-card-item-info-container {
  margin-left: 20px;
}

.collapsible-card-item-container {
  display: none;
  overflow: hidden;
  max-height: 0;
  background-color: #262729;
  transition: max-height 0.35s ease-in-out;
}

<div class="collapsible-card">
  <div class="collapsible-card-title">
    <img src="https://yt3.ggpht.com/a/AATXAJzlZzr16izsGHBCHIkO3H7n-UiHyZPCJFEPiQ=s88-c-k-c0xffffffff-no-rj-mo" class="unselectable" alt="Youtuber's Logo">
    <h5>PewDiePie</h5>
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14 drop-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
      <path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z">
      </path>
    </svg>
  </div>
  <div class="collapsible-card-item-container" style="display: block; max-height: 1140px;">
    <div class="collapsible-card-items">
      <a href="https://www.youtube.com/watch?v=8HHZiNdrZGA" target="_blank">
        <img src="https://i.ytimg.com/vi/8HHZiNdrZGA/mqdefault.jpg" alt="Video's Thumbnail">
        <div class="collapsible-card-item-info-container">
          <h3>I Made The WORST Minecraft MISTAKE There Is. .. - Part 40</h3>
          <span>2020-03-13</span>
        </div>
      </a>
    </div>
    <div class="collapsible-card-items">
      <a href="https://www.youtube.com/watch?v=1B1f9PGLbIs" target="_blank">
        <img src="https://i.ytimg.com/vi/1B1f9PGLbIs/mqdefault.jpg" alt="Video's Thumbnail">
        <div class="collapsible-card-item-info-container">
          <h3>I'm Back in Minecraft! - Part 39</h3>
          <span>2020-03-06</span>
        </div>
      </a>
    </div>
    <div class="collapsible-card-items">
      <a href="https://www.youtube.com/watch?v=WS54qL3GeaI" target="_blank">
        <img src="https://i.ytimg.com/vi/WS54qL3GeaI/mqdefault.jpg" alt="Video's Thumbnail">
        <div class="collapsible-card-item-info-container">
          <h3>Subnautica Part 1 (OMG GAME)</h3>
          <span>2020-03-15</span>
        </div>
      </a>
    </div>
    <div class="collapsible-card-items">
      <a href="https://www.youtube.com/watch?v=fq_rzA3RAmY" target="_blank">
        <img src="https://i.ytimg.com/vi/fq_rzA3RAmY/mqdefault.jpg" alt="Video's Thumbnail">
        <div class="collapsible-card-item-info-container">
          <h3>Worst TIMING I've EVER HAD in a videogame.......</h3>
          <span>2020-03-20</span>
        </div>
      </a>
    </div>
    <div class="collapsible-card-items">
      <a href="https://www.youtube.com/watch?v=Lq8QxKnN_5I" target="_blank">
        <img src="https://i.ytimg.com/vi/Lq8QxKnN_5I/mqdefault.jpg" alt="Video's Thumbnail">
        <div class="collapsible-card-item-info-container">
          <h3>LOST my HAIR, When Hearing New Meme Music! [MEME REVIEW] ? ?#76</h3>
          <span>2020-03-03</span>
        </div>
      </a>
    </div>
    <div class="collapsible-card-items">
      <a href="https://www.youtube.com/watch?v=K2i-fPWWy4A" target="_blank">
        <img src="https://i.ytimg.com/vi/K2i-fPWWy4A/mqdefault.jpg" alt="Video's Thumbnail">
        <div class="collapsible-card-item-info-container">
          <h3>Video flagged for: False Information [MEME REVIEW] ? ?#73</h3>
          <span>2019-12-20</span>
        </div>
      </a>
    </div>
  </div>
</div>