Родительский div - это flex, дочерние div - это столбцы с flex: 1. Как подтолкнуть содержимое правого столбца к правой стороне столбца?

Question

Я пытаюсь нажать «HELLO» во втором столбце справа от столбца, не меняя положение «HELLO» в первом столбце. Какой самый простой способ сделать это?

.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>

Answer 1

попробуйте этот код, он должен работать

.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>

Answer 2

Если вы хотите, чтобы ваш последний столбец свернулся, вы можете сбросить значение flex-grow на 0 с помощью псевдокласса last-of-type.

.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>