CODEWITHSUNDEEP
htmlcssflexboxvertical-alignment
crispychicken
crispychicken

Reputation: 2662

Flexbox align-items stretch issue

I have a 2 column container. On the left side, there is an image. On the right side, I have 2 <p> elements. I want to position one <p> element at the top, the other at the bottom of the container.

I tried to use flexblox, with align-items to stretch, but that doesn't work. Although flex-start and flex-end does work.

Is this even possible with flexbox?

.container {
  display: flex;
  align-items: stretch;
}
img {
  display: block;
  width: 100%;
}
.element-box {
  height: 100%;
}
<div class="container">
  <div>
    <img src="https://placeimg.com/640/480/nature">
  </div>
  <div class="element-box">
    <p>Should be on Top</p>
    <p>Should be on Bottom</p>
  </div>
</div>

Upvotes: 1

Views: 2737

Answers (2)

Ravinder Singh
Ravinder Singh

Reputation: 84

You need flex for second container too where you are having you <p> elements, please look at css below it'll help you:

.element-box {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
}

Upvotes: 3

kukkuz
kukkuz

Reputation: 42352

You can make your element-box a column flexbox and give justify-content: space-between. Also remove height: 100% from it.

See demo below:

.container {
  display: flex;
  align-items: stretch;
}
img {
  display: block;
  width: 100%;
}
.element-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
<div class="container">
  <div>
    <img src="https://placeimg.com/640/480/nature">
  </div>
  <div class="element-box">
    <p>Should be on Top</p>
    <p>Should be on Bottom</p>
  </div>
</div>

Upvotes: 4

Related Questions