V3_Kombination_fixe flexibleMasse

Hier geht es um Techniken, wie mit fixen und flexiblen Massen kombiniert gearbeitet werden kann. Und darum, wie bewirkt werden kann, dass Typography sich dem Parent flexibel anpasst, durch Stretching oder Skalierung in x- und y-Achse.

fix-flexibel Grid

.grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr 200px;
            grid-template-rows: 1fr 1fr 200px;
           
        }

fix-flexibel Flexbox

Mit den properties flex-basis, flex-grow, flex-shrink kannst du pro Element bestimmen, wie es sich in Bezug auf den vorhandenen Platz verhalten soll. Die Kurzschreibweise ist flex und dann folgt die Anweisung für grow, shrink und basis.

.fix{
        flex-basis: 200px;/* Basisbreite */
        flex-grow: 0; /*Element soll nicht wachsen*/
        flex-shrink: 0;/*Element soll nicht schrumpfen*/
        flex: 0 0 200px; /*Kurzschreibweise, identisch mit oben*/
    }
.grow{
        flex-basis: 200px;/* Basisbreite */
        flex-grow: 1; /*Element soll wachsen*/
        flex-shrink: 0;/*Element soll nicht schrumpfen*/
        flex: 1 0 200px;/*Kurzschreibweise, identisch mit oben*/
        }
.shrink{
        flex-basis: 200px;/* Basisbreite */
        flex-grow: 0; /*Element soll nicht wachsen*/
        flex-shrink: 1;/*Element soll schrumpfen*/
        flex: 0 1 200px;/*Kurzschreibweise, identisch mit oben*/
        }
.growshrink{
        flex-basis: 200px;/* Basisbreite */
        flex-grow: 1; /*Element soll wachsen*/
        flex-shrink: 1;/*Element soll schrumpfen*/
        flex: 0 1 200px;/*Kurzschreibweise, identisch mit oben*/
        }

SVG skalieren -- Grösse entsprechend parent Element

SVG Code ohne width und heightAngaben einfügen und im CSS svg auf 100% Breite setzen:

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 89.86 88.73" >
                
                <path class="cls-1" d="M89.72,0v9.42H9.42l.07,29.74,67.01-.21v9.42l-66.94.21.07,30.73h80.23v9.42H.21L0,0h89.72Z"/>
</svg>

svg {
            width: 100%;
            height: auto;
    }

JavaScript, Manipulation über CSS Eigenschaften

#scale {
            --font-scale-x:1;
            --font-scale-y:1;
            display: inline-block;
            border:1px solid black;
            transform: scale(var(--font-scale-x),var(--font-scale-y));
            transform-origin: top left;
        }

<div class="grid-container">
        <div class="scalefont">
            <div id="scale" class="text">E</div>
        </div>
        <div class="fraction">
            Fraction/Fraction
        </div>
        <div class="fix">
            200/200px
        </div>
    </div>

const text = document.getElementById("scale");

       
        function resetText() {
            const parentContainerWidth = text.parentNode.clientWidth;
            const parentContainerHeight = text.parentNode.clientHeight;
            const currentTextWidth = text.scrollWidth;
          
            /* scale-x abhängig von Zellbreite */
            let newScaleX = (parentContainerWidth / currentTextWidth);
            text.style.setProperty('--font-scale-x', newScaleX);

            
        };

        window.onresize = resetText;
        resetText();

Tutorial mit vergleichbarem Ansatz aber unter Verwendung von Variable Fonts: https://medium.com/@mandy.michael/resize-text-to-fit-the-parent-with-variable-font-width-axis-16921b6687ae