Kind ist die gleiche Größe wie Eltern, aber Scroll erscheint

Question

Ich bin ein neues Widget mit SVG darin hinzufügen.

Ich mache es gleiche Größe wie Eltern, aber es führt zu unerwünschten Scroll zu erscheinen.

Fiddle: https://jsfiddle.net/Murval/j1oe6x4b/

.widget-outer { 
 
    display: flex; 
 
    height: 210px; 
 
    width: 400px; 
 
    border: 1px solid black; 
 
} 
 

 
.widget { 
 
    overflow-y: auto; 
 
    flex: 1; 
 
} 
 

 
.svg-container { 
 
    text-align: center; 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.svg { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<div class="widget-outer"> 
 
    <div class="widget"> 
 
    <div class="svg-container"> 
 
     <svg class="svg" viewBox="0 0 100 100"> 
 
     <circle cx="50" cy="50" r="50" style="fill: gray;"></circle> 
 
     </svg> 
 
    </div> 
 
    </div> 
 
</div>

Wie ich sehe, erscheint die rolle, weil es extra Raum unter svg-Behälter div. Die Änderung der Anzeige, wie in anderen Posts vorgeschlagen, hat jedoch keine Wirkung.

Zusätzliche Überlegungen:

• Ich will nicht Stile für widget-Außen und Widget Klassen ändern, da sie für andere Widgets fein arbeiten. Überlauf-y: Auto auf Widget Klasse ist erforderlich, weil einige andere Widgets längeren Inhalt haben, der scrollbar sein sollte.
• Ich möchte svg Element in Widget für jede Kombination von Höhe und Breite auf Widget-Container den gesamten verfügbaren Platz zu nehmen.
• Absteigend max-height von svg Element hilft, aber kann nicht als richtige Lösung für dieses Problem gezählt werden.

tl; dr Ist es möglich, svg in Widget ohne Scrollbar passen?

Answer 1

Sie benötigen beide.svg-container und .svg zu display: block

.widget-outer { 
 
    display: flex; 
 
    height: 210px; 
 
    width: 400px; 
 
    border: 1px solid black; 
 
} 
 

 
.widget { 
 
    overflow-y: auto; 
 
    flex: 1; 
 
} 
 

 
.svg-container { 
 
    text-align: center; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.svg { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    display: block; 
 
}

<div class="widget-outer"> 
 
    <div class="widget"> 
 
    <div class="svg-container"> 
 
     <svg class="svg" viewBox="0 0 100 100"> 
 
     <circle cx="50" cy="50" r="50" style="fill: gray;"></circle> 
 
     </svg> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

zu ändern, dass ein seltsames Verhalten ist. Auch ich suche technische Gründe dafür.

Für die Zeit Befinden Sie die Bildlaufleiste entfernen können - durch zwei Änderungen vornehmen:

1. entfernen display: inline-block; von .svg-container Klasse
2. float:left-SVG Element hinzufügen. oder display funktioniert auch.

.widget-outer { 
 
    display: flex; 
 
    height: 210px; 
 
    width: 400px; 
 
    border: 1px solid black; 
 
} 
 

 
.widget { 
 
    overflow-y: auto; 
 
    flex: 1; 
 
} 
 

 
.svg-container { 
 
    text-align: center; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.svg { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    float: left; 
 
}

<div class="widget-outer"> 
 
    <div class="widget"> 
 
    <div class="svg-container"> 
 
     <svg class="svg" viewBox="0 0 100 100"> 
 
     <circle cx="50" cy="50" r="50" style="fill: gray;"></circle> 
 
     </svg> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Die SVG Element ist vertikal an der Basislinie angeordnet ist.Deshalb wird unten 4x mehr Platz benötigt. Sagen Sie ihm einfach, dass er oben vertikal ausgerichtet wird und Sie erhalten das gewünschte Ergebnis. ändern Sie CSS-gerade von

.svg { 
    max-width: 100%; 
    max-height: 100%; 
} 

zu

.svg { 
    max-width: 100%; 
    max-height: 100%; 
    vertical-align: top; 
} 

Answer 4

Eine andere Lösung ich die Scroll-

.widget { 
    overflow:hidden; 
    flex: 1; 
} 

Answer 5

Alles, was Sie brauchen, ist zu entfernen gefunden vertical-align: middle; auf dem svg einzustellen. Dies wird das erwartete Verhalten auf Ihrem gegebenen Layout beibehalten, das display: block möglicherweise nicht.

.widget-outer { 
 
    display: flex; 
 
    height: 210px; 
 
    width: 400px; 
 
    border: 1px solid black; 
 
} 
 

 
.widget { 
 
    overflow-y: auto; 
 
    flex: 1; 
 
} 
 

 
.svg-container { 
 
    text-align: center; 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.svg { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    vertical-align: middle; 
 
}

<div class="widget-outer"> 
 
    <div class="widget"> 
 
    <div class="svg-container"> 
 
     <svg class="svg" viewBox="0 0 100 100"> 
 
     <circle cx="50" cy="50" r="50" style="fill: gray;"></circle> 
 
     </svg> 
 
    </div> 
 
    </div> 
 
</div>