Question 215227 in Html Question posted in
Some basic documentation can be found here.

How can I influence which children of an HTML element cause it to grow and which do not?

I have a set of images with captions, shown side by side via flexbox.

There are a few different aspect ratios the images will be displayed at, configured per image. They should all display at the same height.

Because of having several possible aspect ratios, I would like the widths to be calculated automatically via the height and aspect ratio, keeping the code neat.

Problems arise when the caption is introduced. If the caption text as a single line will be wider than the width automatically calculated for the image, the text pushes at its container causing it to grow, rather than wrapping.

The question is, how can I encourage it to wrap instead?

  • I don’t want to add a fixed width to the figure elements, because I want their widths to depend on the fixed height and aspect ratio of each image.
  • Setting width: min-content or width: max-content or width: fit-content don’t help on the figures or the captions.
  • Playing with flex-grow isn’t going to help, since this isn’t to do with unclaimed or extra flex space.
.flex {
  display: flex;
  gap: 1rem;
}

figure {
  margin: 0;
  padding: 0;
}

img {
  object-fit: cover;
  height: 200px;
  width: auto;
}

.pic-square img {
  aspect-ratio: 1 / 1;
}

.pic-wide img {
  aspect-ratio: 16 / 9;
}
<div class="flex">
  <figure class="pic-square">
    <img src="http://placekitten.com/200/300">
    <figcaption>Kitten 1 caption which is long enough that it needs more width than the image if it were a single line, but I want it to wrap rather than pressuring its parents into growing.</figcaption>
  </figure>
  <figure class="pic-wide">
    <img src="http://placekitten.com/400/300">
    <figcaption>Kitten 2 caption.</figcaption>
  </figure>
</div>
Tags:

2

Answers


  1. 0

    Don’t you just need to set a small flex-basis?

    .flex {
  display: flex;
  gap: 1rem;
}

figure {
  flex-basis: 0px;
  margin: 0;
  padding: 0;
}

img {
  object-fit: cover;
  height: 200px;
  width: auto;
}

.pic-square img {
  aspect-ratio: 1 / 1;
}

.pic-wide img {
  aspect-ratio: 16 / 9;
}
    <div class="flex">
  <figure class="pic-square">
    <img src="http://placekitten.com/200/300">
    <figcaption>Kitten 1 caption which is long enough that it needs more width than the image if it were a single line, but I want it to wrap rather than pressuring its parents into growing.</figcaption>
  </figure>
  <figure class="pic-wide">
    <img src="http://placekitten.com/400/300">
    <figcaption>Kitten 2 caption.</figcaption>
  </figure>
</div>
    Login or Signup to reply.
  2. 0

    I don’t think you’ll be able to use aspect-ratio in this case. You need to set the width of your <figure>s, but you can use calc() to determine the width based on the height and the aspect ratio. Like this.

    :root {
  --image-height: 200px;
}
.flex {
  display: flex;
  gap: 1rem;
}

figure {
  margin: 0;
  padding: 0;
}

img {
  object-fit: cover;
  height: var(--image-height);
  width: 100%;
}

.pic-square {
  width: var(--image-height);
}

.pic-wide {
  width: calc(var(--image-height) * 16 / 9);
}
    <div class="flex">
  <figure class="pic-square">
    <img src="http://placekitten.com/200/300">
    <figcaption>Kitten 1 caption which is long enough that it needs more width than the image if it were a single line, but I want it to wrap rather than pressuring its parents into growing.</figcaption>
  </figure>
  <figure class="pic-wide">
    <img src="http://placekitten.com/400/300">
    <figcaption>Kitten 2 caption.</figcaption>
  </figure>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search