CSS Nachdem span Container mit Jquerry ausblendet wird, übernimmt anderer Span die Width

[Glycol]

Hey, ich habe das Problem, das wenn ich 4 Spans die alle in einer Reihe sind verschwinden lasse mit Jquerry, dass dann automatisch der Span Container welcher übrig ist, die Width von den anderen 4 Spans übernimmt.

Span 1 = 20%
Span 2 = 20%
Span 3 = 20%
Span 4 = 20%
Span 5 = 20%

Nachdem Span 2-5 verschwinden :

Span 1 = 100% width

Also Span 1 übernimmt automatisch die width von den verschwundenen Spans und wird also immer größer.

Das ist auch das was ich wollte, nur wollte ich dies selber machen zbs. mit einer Animation in Jquerry, damit es nicht so laggy aussieht.

Hier ein paar Bilder um das Problem besser darzustellen :

Vorher :


Nachdem auf ###TEXT1### geklickt wurde.



Hier ist noch der Code :
CSS

#kategorien
{
  position:absolute;
  width:100%;
  height: 100%;
  margin:0;
  padding:0;
  border:0;
  display: flex;
}
.kategorie
{
  position:relative;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  flex: 20;
  -webkit-flex: 1;
  -ms-flex: 1; 
}
#kategorie1
{
  background-color:green;
}
#kategorie2
{
  background-color:yellow;
}
#kategorie3
{
  background-color:gray;
}
#kategorie4
{
  background-color:brown;
}
#kategorie5
{
  background-color:#446353;
}

HTML

	<div id="kategorien">
		<span id="kategorie1" class="kategorie">###TEXT1###</span>
		<span id="kategorie2" class="kategorie">###TEXT2###</span>
		<span id="kategorie3" class="kategorie">###TEXT3###</span>
		<span id="kategorie4" class="kategorie">###TEXT4###</span>
		<span id="kategorie5" class="kategorie">###TEXT5###</span>
		</div>

Jquerry

$(document).ready(function()
{
	$("#kategorie1").click(function()
	{
		slideandHide("kategorie2");
		slideandHide("kategorie3");
		slideandHide("kategorie4");
		slideandHide("kategorie5");
	});
	
	function slideandHide(value){
		var fullwidth = $("#kategorien").css("width");
		$("#" + value).css({"left": 0}).animate({"left":fullwidth},1000);
		$("#"+ value).hide(0);
	};
});

Ich hoffe jemand kann mir helfen, danke im voraus

Ergänzung (7. Oktober 2016)

Hab die Lösung jetzt selber heraus gefunden

einfach bei ".Kategorie" "max-width:20%" setzten.

Dann wird es nicht größer als 20%, falls wer anders mal das Problem hat

 

[Sobber]

Hier das ganze als JSfiddle.

Du gibst den einzelnen Kategorien einen Flex Wert. Dieser gibt an, wie der restliche freie Bereich aufgefüllt werden soll. Setz den auf 0 (Standard) und das span nimmt nicht mehr freien Platz ein.