CODEWITHSUNDEEP
cssflexbox
n1234
n1234

Reputation: 175

Flexbox - Image and Content

I have a simple flex container with 2 items; an image and the other is a small piece of descriptive text.

I'd like the image to grow and be as responsive as possible, but I also want there to be a max-height in place to avoid it growing too much. This causes a gap when the max-height is reached and the screen expands even further in width.

Is there a way to only have the container item fill the image as it grows so there are no gaps, or perhaps align the image to the left or the right side of the screen (self-align didn't appear to work)? I'm not sure what the answer to this is.

.container {
  background-color: #FFEEDD;
  display: flex;
  flex-direction: row-reverse;
}

.container>.image {
  flex-grow: 1;
}

.image img {
  display: block;
  max-width: 100%;
  max-height: 300px;
}

.container>.text {
  flex-grow: 2;
}
<div class="container">
  <div class="image">
    <img src="https://www.placecage.com/c/1500/2000">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius.
  </div>
</div>

Upvotes: 3

Views: 2137

Answers (2)

Daniel
Daniel

Reputation: 6481

If you want to align the text and image to the sides use justify-content:

.container {
  background-color: #FFEEDD;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.image img {
  display: block;
  max-width: 100%;
  max-height: 300px;
}

codepen

Upvotes: 1

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Solution #1

Get rid of

.container > .image {
  flex-grow: 1;
}

Solution #2

.image{
  text-align:right;
}

Solution #3 (You were trying to achieve this one)

All you needed was to add flex, direction to column and then align items to right by flex-end

.image{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  flex:1;
}


.container {
  background-color: #FFEEDD;
  display: flex;
  flex-direction: row-reverse;
}

.image img {
  display: block;
  max-width: 100%;
  max-height: 300px;
}

.container>.text {
  flex-grow: 2;
}
<div class="container">
  <div class="image">
    <img src="https://www.placecage.com/c/1500/2000">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius.
  </div>
</div>

Upvotes: 2

Related Questions