Wie sorge ich dafür, dass ein Flex-Item die restliche Zeilenbreite einnimmt?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabula_Rasa

Mitglied
12 Mai 2017
261
2
18
Hallo zusammen,

ich habe einen Container mit einem Bild, einer Textarea und einem Button:

HTML:
<div class="write-comment">
               <img src="./image.png" alt="Profile Image" class="input-image">
               <textarea class="comment-input" placeholder="Write a comment"></textarea>
               <button class="btn btn-primary ">Send</button>
</div>

CSS:
.write-comment {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    border-bottom: 0.5px solid lightgray;
}

.comment-input{
    font-size: 14px;
    min-height: 30px ;
    resize: none;
}

.input-image{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 1rem;
}

Das Bild und die Textarea sollen in einer Zeile sein und die Textarea soll die restliche Breite dieser Zeile einnehmen und der Button soll auf die nächste Zeile rücken. Wie bekomme ich das hin?
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.140
427
83
68
Dafür gibt es verschiedene Möglichkeiten:

1. Ohne zusätzlichen Container aber mit etwas Rechnerei, was nicht wirklich im Sinne von Flex ist:
Code:
        .write-comment {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            padding-bottom: 1rem;
            border-bottom: 0.5px solid lightgray;
        }

        .comment-input {
            font-size: 14px;
            min-height: 30px;
            resize: none;
            width: calc(100% - 50px - 1rem);
        }

        .input-image {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 1rem;
        }

2. Mit zusätzlichem Container, dafür ohne Rechnen:
Code:
    <div class="write-comment">
        <div class="comment-inner">
            <img src="images/dia0.jpg" alt="Profile Image" class="input-image">
            <textarea class="comment-input" placeholder="Write a comment"></textarea>
        </div>
        <button class="btn btn-primary ">Send</button>
    </div>
Code:
        .comment-inner {
            width: 100%;
            display: flex;
            padding-bottom: 1rem;
            border-bottom: 0.5px solid lightgray;
        }

        .comment-input {
            font-size: 14px;
            min-height: 30px;
            resize: none;
            flex: 1;
        }

        .input-image {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 1rem;
        }

3. Auch mit Grid würde es ohne zusätzlichen Container gehen, wenn man template-areas verwendet.
 
  • Like
Reaktionen: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
261
2
18
Danke für die Möglichkeiten. Ich bin mir meist nicht sicher, wie es ein professioneller CSS-Programmierer das machen wrüde, deshalb frage ich meistens nach.
 
Werbung: