Parent div is flex, children divs are columns with flex:1. How to push the content of the right column to the right side of the column?

Question

I'm trying to push the "HELLO" in the second column to the right side of the column without changing the position of the "HELLO" in the first column. What is the easiest way of accomplishing this?

.row {
    display: flex;
}
.column {
    flex: 1;
}
.slideshow-photos {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mySlides {
    width: 100px;
    height: 100px;
}

<div class='row'>
    <div class='column'>
        <p>HELLO</p>
    </div>
    <div class='column'>
        <div class="photos-container">
            <div class="mySlides">
                <img class='slideshow-photos' src="https://www.animalfriends.co.uk/app/uploads/2014/08/06110347/Kitten-small.jpg">
            </div>
        </div<
    </div>
</div>

Mistake on my part, I dumbed down the question a bit too much. In my case the actual content is not text, so I need a solution which would work on a container div as well for example. — Bobimaru, Apr 15 '19 at 22:06
make it a flex container and align everything to the right (there is a ton of ways for this https://stackoverflow.com/q/32551291/8620333) — Temani Afif, Apr 15 '19 at 22:09
Make the second column a flexbox itself? I also edited my code, my goal is to put the image of the kitten to the right side of the column. — Bobimaru, Apr 15 '19 at 22:11

score 1 · Accepted Answer · answered Apr 15 '19 at 22:09

If you want your last column to collapse, you can reset the flex-grow value to 0 with the last-of-type pseudo-class.

.row {
    display: flex;
}
.column {
    flex: 1;
}
.column:last-of-type {
    flex: 0;
}
.slideshow-photos {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mySlides {
    width: 100px;
    height: 100px;
}

<div class='row'>
    <div class='column'>
        <p>HELLO</p>
    </div>
    <div class='column'>
        <div class="photos-container">
            <div class="mySlides">
                <img class='slideshow-photos' src="https://www.animalfriends.co.uk/app/uploads/2014/08/06110347/Kitten-small.jpg">
            </div>
        </div<
    </div>
</div>

score 1 · Answer 2 · answered Apr 15 '19 at 22:28

try this code it should work

.row {
    display: flex;
    justify-content: space-between;
}
.column {
    /* not need flex 1 here*/
}

<div class='row'>
    <div class='column'>
        <p>HELLO</p>
    </div>
    <div class='column'>
        <p>HELLO</p>
    </div>
</div>

Parent div is flex, children divs are columns with flex:1. How to push the content of the right column to the right side of the column?

2 Answers2