Guten Abend,
leider habe ich ein kleines Problem und benötige Hilfe. In diesem Quelltext wird für jeden Datensatz in der Datenbank ein Div Container erstellt. Die Div Container sollen alle nebeneinander sein mit einem kleinen Abstand. Ich habe den Containern eine bestimmte Größe in Prozent gegeben, jedoch sind sie nur ein paar Pixel breit. Durch meine angegeben Größen der Container dürften normalerweise nur vier Container nebeneinander auf eine Seite passen, jedoch möchte ich das man horizontal scrollen kann und somit alle Container nebeneinander hat. Was ist mein Fehler ? Wieso sind die Container nur so klein? Die Container sind nicht 24,5% von der Seite groß wie im Style programmiert, sondern höchstens 5px breit! Es wäre super, wenn mir jemand helfen könnte! :) Danke!!!!!
Code
<style>
.output-Main-Div{
width: 100%;
height: 310px;
overflow-x: scroll;
overflow-y: hidden;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-content:space-around;
align-items:center;
}
.output-Container{
height: 80%;
width:24%;
display:flex;
background:red;
align-self: auto;
}
.output-Container:hover{
width: 40%;
height: 100%;
}
</style>
<div class="output-Main-Div">
<div class="output-Container">1
</div>
<div class="output-Container">2
</div>
<div class="output-Container">3
</div>
<div class="output-Container">4
</div>
</div>