Der Text auf beiden Spalten ist unsichtbar in Chrom

Question

der Text nur in der ersten Spalte angezeigt wird, dies am Beispiel des Codes ist:

<div STYLE="display:inline-block;-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;height:100;width:100%;background-color:red;"> 
 
    <div STYLE="padding:10px;-webkit-column-count: 2 ; -moz-column-count: 2;column-count: 2;overflow:auto;display:inline-block;position:relative;height:auto;width:100%;background-color:#FFFFFF;border: 1px solid #000000;"> 
 
    <BR>TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT 
 
    <BR>TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT 
 
    </div> 
 

 
    <div STYLE="padding:10px;-webkit-column-count: 2 ; -moz-column-count: 2;column-count: 2;overflow:auto;display:inline-block;position:relative;height:auto;width:100%;background-color:#FFFFFF;border: 1px solid #000000;"> 
 
    <BR>TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT 
 
    <BR>TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT 
 
    <BR>TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT 
 
    <BR>TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT 
 
    </div> 
 

 
    <div STYLE="padding:10px;-webkit-column-count: 2 ; -moz-column-count: 2;column-count: 2;overflow:auto;display:inline-block;position:relative;height:100px;width:100%;background-color:#FFFFFF;border: 1px solid #000000;"> 
 
    <BR>TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT 
 
    <BR>TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT 
 
    <BR>TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT 
 
    <BR>TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT 
 
    </div> 
 

 
    <div STYLE="padding:10px;-webkit-column-count: 2 ; -moz-column-count: 2;column-count: 2;overflow:auto;display:inline-block;position:relative;height:auto;width:100%;background-color:#FFFFFF;border: 1px solid #000000;"> 
 
    <BR>TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT 
 
    <BR>TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT-TEXT 
 
    </div>

Answer 1

Das overflow Attribut, gekoppelt mit verschachtelten Spaltenlayouts , scheint schuld zu sein.

Lassen Sie uns zunächst eine einfachere, sauberere Version des Problems einrichten.

Führen Sie das Snippet aus, und beachten Sie, dass während die Rahmen der Elemente sichtbar sind, der Inhalt der zweiten Spalte nicht sichtbar ist (Testen in Chrome 62.0.3202.89).

.outer-split { 
 
    -webkit-column-count: 2; 
 
    -moz-column-count: 2; 
 
    column-count: 2; 
 
    -webkit-column-gap: 0; 
 
    -moz-column-gap: 0; 
 
    column-gap: 0; 
 
} 
 

 
.inner-split { 
 
    -webkit-column-count: 2; 
 
    -moz-column-count: 2; 
 
    column-count: 2; 
 
    border: 1px solid #ddd; 
 
    overflow: auto; 
 
}

<div class="outer-split"> 
 
    <div class="inner-split"> 
 
    column 1 
 
    <br> column 1 
 
    </div> 
 

 
    <div class="inner-split"> 
 
    column 2 
 
    <br> column 2 
 
    </div> 
 

 
    <div class="inner-split"> 
 
    column 3 
 
    <br> column 3 
 
    </div> 
 

 
    <div class="inner-split"> 
 
    column 4 
 
    <br> column 4 
 
    </div> 
 

 
</div>

das overflow Attribut Take away, und der Inhalt sichtbar ist.

.outer-split { 
 
    -webkit-column-count: 2; 
 
    -moz-column-count: 2; 
 
    column-count: 2; 
 
    -webkit-column-gap: 0; 
 
    -moz-column-gap: 0; 
 
    column-gap: 0; 
 
} 
 

 
.inner-split { 
 
    -webkit-column-count: 2; 
 
    -moz-column-count: 2; 
 
    column-count: 2; 
 
    border: 1px solid #ddd; 
 
}

<div class="outer-split"> 
 
    <div class="inner-split"> 
 
    column 1 
 
    <br> column 1 
 
    </div> 
 

 
    <div class="inner-split"> 
 
    column 2 
 
    <br> column 2 
 
    </div> 
 

 
    <div class="inner-split"> 
 
    column 3 
 
    <br> column 3 
 
    </div> 
 

 
    <div class="inner-split"> 
 
    column 4 
 
    <br> column 4 
 
    </div> 
 
</div>

Meine Vermutung ist, dass die aufgrund der verschachtelten Spaltenlayout, wird der Browser die Berechnung, dass der gesamte Inhalt ist „Überlauf“ und deshalb versteckt es. Die Einstellung overflow:visible bewirkt, dass der ausgeblendete Inhalt angezeigt wird.

Ich zögere zu sagen, dass dies ein Fehler ist; Es sieht so aus, als ob der Browser den Platz für den Inhalt reserviert, aber immer noch schneidet. Ich habe versucht, den Inhalt explizit Höhe/Breite zu geben (siehe Advanced Example), aber der Text ist immer noch versteckt.