Frage Inline-Element (a) soll Größe des umgebenden Elements (div) annehmen...

[annsen]

...geht das?


Ich habe 2 rechteckige Bereiche (DIVs), die ich per Flexbox (column) nebeneinander angeordnet habe.





Jeder dieser Bereiche hat im Ganzen die Funktion eines Links, enthält also ein <a> -Element.

Jeder der Bereiche enhält (innerhalb des <a> -Elements) dann auch noch je 2 Textbereiche, die ebenfalls per Flexbox (row) angeordnet sind.
Nun möchte ich, dass der jeweils 2te (hier dunkel eingefärbte) Bereich immer unten angeordnet ist - im linken Bereich würde/soll also ein Leerraum zwischen den 3 Zeilen und dem unteren Textbereich entstehen.

Ich hab das <a> -Element zur Flexbox gemacht und um die 2 Textbereiche (jeweils ein DIV) dann versucht mit "space-between" den Zwischenraum zu schaffen aber das <a> -Element bleibt nur so groß wie sein Inhalt. Wie schaffe ich es, dass <a> so groß wird, wie das umgebende DIV?

Vielleicht hat es auch einen anderen Grund, warum das so nicht klappt aber ich hab jetzt Schritt für Schritt alle Punkte mehrfach kontrolliert und ich glaube das ist der Fehler/die Ursache.

Hat jemand einen Tipp?

Danke vorab!!

 

[basti1012]

Kannst du mal deinen Code zeigen ?
Flexbox column macht normalerweise die Elemente untereinander und row nebeneinander.
Nach deiner Beschreibung ist da wohl ein Fehler drinne.

Ansonsten währe dein vorhaben auch kein problem, doch dafür müßte man auch deinen Code sehen um zu sehen was du da bis jetzt gemacht hast

 

[annsen]

Da hast du natürlich recht - row um die Bereiche nebeneinander zu bekommen und IN den Bereichen dann column. Hatte ich auch so gemacht aber hier falsch beschrieben...

<section class="bereiche">
    
   <article class="art1">
        <a class="" href="" target="_blank">
            <div>
                <p>wenig Text</p>
                <p>blablabla</p>
                <p>blablablablabla</p>
            </div>
            <div class="fuss">
                <p>Fußzeile 1</p>
            </div>
        </a>
    </article>

    <article class="art2">
        <a class="" href="" target="_blank">
            <div>
                <p>etwas mehr Text</p>
                <p>blablabla</p>
                <p>blablablablabla</p>
                <p>blablablablablablabla</p>
            </div>
            <div class="fuss">
                <p>Fußzeile 2</p>
            </div>
        </a>
    </article>

</section>

CSS:

.bereiche{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* falls mehr Bereiche hinzukommen, soll ein Umbruch in die nächste Zeile erfolgen */
    justify-content: flex-start;
    }

article {
    margin-right: 1rem;
    padding: 0.4rem;
    background-color: rgb(248,248,255);
    border: 1px dashed rgb(156,156,156);
    border-radius: 4px;
    width: 350px;
    }

article a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    }

.fuss {
    margin-top: 0.5rem;
    display: flex;
    min-height: 3rem;
    width: auto;
    color: rgb(255, 255, 255);
    background-color: rgb(105, 127, 165);
    }

.fuss p {
    margin: auto 1rem;
    font-size: 90%;
    }

 

[annsen]

PERFEKT!

Danke!!!