Wie ein verschachtelten Codeblock Stil CSS erstellen

Question

ich benötigen CSS-Klassen zu erstellen, die hier Inhalt ähnlich zu diesem Design Bild anzeigen kann: design concept

die Code Aussagen selbst keine Rolle spielt offensichtlich. Aber wie kann ich CSS erstellen, das den enthaltenen Inhalt umhüllen kann, wie es im Bild zu sehen ist, und das in n-verschachtelten Containern funktioniert? Ich habe mit div-Tags herumgespielt und gezeigt: Inline-Block-Styling, aber nichts funktioniert.

Hier ist, was ich derzeit habe, mit flex-box. Dies ist fast das, was ich brauche, außer dass die "Zeilen" ihre Breite nicht auf den Textinhalt einstellen, da sie einfach die Breite von allem auf die größte Breite des Kindes einstellt ... scheint, dass dieser Ansatz möglicherweise nicht möglich ist.

.container { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    padding-left: 15px; 
 
} 
 

 
.containerRow { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    height: 35px; 
 
    margin: 5px; 
 
} 
 

 
.dropContainer { 
 
    height: 70px; 
 
    border: 1px solid #ccc!important; 
 
    background-color: white; 
 
    color: black; 
 
} 
 

 
.purple { 
 
    background-color: #872A61; 
 
    color: white; 
 
} 
 

 
.green { 
 
    background-color: #478B26; 
 
    color: white; 
 
}

<div class="container purple"> 
 
    <div class="containerRow"> 
 
    if (something == true) then 
 
    </div> 
 

 
    <div class="container green"> 
 
    <div class="containerRow"> 
 
     <div><b>where</b> something(x: Number, y:Number) <b>is</b></div> 
 
    </div> 
 

 
    <div class="dropContainer"> 
 
     Some more stuff again 
 
    </div> 
 

 
    <div class="dropContainer"> 
 
     Some more stuff again 
 
    </div> 
 

 
    <div class="containerRow"> 
 
     <b>end</b> 
 
    </div> 
 

 
    </div> 
 

 
    <div class="containerRow"> 
 
    <b>end</b> 
 
    </div> 
 
</div>

Answer 1

Verwenden Ränder oder padding Arten mit Prozentsätzen, die n-te Glied zu erzielen.