Make Scrollbar stattdessen fixiert werden Layout Brech

Question

Wenn wie dies mit Layout:

div { 
 
    width: 25vw; 
 
    height: 150vh; 
 
    float: left; 
 
    background: rgb(30,120,210) 
 
} 
 
div:nth-child(2n+2) { 
 
    background: rgb(210,120,30) 
 
}

<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

Scrollbar Design zermalmt. Ohne Scrollbalken funktioniert es gut, jedes Element benötigt 1/4 der Bildschirmbreite. Nun wäre eine Lösung, width: calc(25vw - 17px) zum letzten Element hinzuzufügen, aber mein Gitter ist viel komplizierter als das. Also habe ich darüber nachgedacht, ob es möglich ist, den Schieberegler ähnlich wie position: fixed zu gestalten, so dass er über Elemente hinausgeht anstatt sie zu zerquetschen. Oder noch besser, wenn möglich, Scrollbar zu entfernen. Dieses Problem tritt unter Linux Firefox oder Chrome nicht auf.

Answer 1

Warum nicht einfach width: 25% anstelle von width: 25vw verwenden? Dann wird die Bildlaufleiste berücksichtigt.

Arbeitsbeispiel:

div { 
 
    width: 25%; 
 
    height: 150vh; 
 
    float: left; 
 
    background: rgb(30,120,210) 
 
} 
 
div:nth-child(2n+2) { 
 
    background: rgb(210,120,30) 
 
}

<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

Answer 2

Wenn Sie flexbox verwenden kann es einfach durch flex und min-width Eigenschaften gelöst werden:

body { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
div { 
 
    flex: 1; 
 
    height: 150vh; 
 
    background: #123; 
 
    min-width: 25%; 
 
    max-width: 25%; 
 
} 
 

 
div:nth-child(odd) { 
 
    background: #222; 
 
}

<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

So kann max-width für jedes neue Element in der Zeile verwendet werden, um der Regel zu folgen.

PS: für Cross-Browser-Tests, vergessen Sie nicht prefix flex Eigenschaften.