title: Controlling width of child of min-width parent
body: <p>I have a simple, single page with a single, fixed-width content column (fixed width on <code>body</code>), that, among other things, contains figures as blocks.</p>
  
  <p>Figures always contain exactly one image, an optional caption, and are styled with a border and a background. It is preferable that images retain their original size, but should be scaled down if the border-box width of the figure would not fit into the column. Captions, if present, should be contained within the figure (i.e. on its background and within its borders), and should be broken to multiple lines if it would cause the figure to grow in width.</p>
  
  <p>I have come across basically two ways of achieving this, but I cannot really get either to work.</p>
  
  <p>The first one is setting <code>display: table</code> on the figure and <code>display: table-caption</code> on the caption, but this seems to cause the browser to take it completely out of the figure, not leave it inside.</p>
  
  <p>The second is setting <code>width: min-content; max-width: 100%</code> on the figure. This works properly if the figure is naturally smaller than the column width, but I could not manage to have it shrink the image. While the figure element itself is correctly width-limited, the image in it simply overflows. (<code>width: fit-content</code> also takes the caption's width into consideration.) <code>object-fit: scale-down</code> on the image gets completely ignored. If I set <code>width: 100%</code> and/or <code>max-width: 100%</code>, it gets arbitrarily scaled down to match the minimum width of the caption, if present, or 0 if there's no caption. Only thing that truly works is if I specify the image's exact width, but then it loses responsiveness.</p>
  
  <p>I have looked all over the web for a solution, including SO, but not found a proper solution. Here's a simplified HTML/CSS to illustrate what I'm talking about.</p>
  
  <pre><code>&lt;body&gt;
   &lt;figure&gt;
    &lt;img src="some-image.png" /&gt;
    &lt;figcaption&gt;Lorem ipsum dolor sit amet, this might be narrower/wider than the image above or completely omitted.&lt;/figcaption&gt;
   &lt;/figure&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    border: 1px solid red;
    width: 300px;
  }
  
  figure {
    background: gray;
    display: block;
    border: 1px solid blue;
    width: min-content;
    max-width: 100%;
  }
  
  figure img {
    border: 1px solid green;
    object-fit: scale-down; /* Doesn't seem to do anything */
    width: 100%; /* This causes the image to shrink to the caption, or 0 if there is no caption */
    max-width: 100%; /* Same as above */
  }
  </code></pre>
  
  <p>I think I kind of understand <em>why</em> this is happening, I have no idea how to solve it. Any help would be appreciated. If JavaScript is absolutely necessary, please do not use any other frameworks than JQuery.</p>
  
  <p>Here are two screenshots demonstrating both a correctly working and an overflowing case:
  <a href="https://i.stack.imgur.com/7wCC6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7wCC6.png" alt="Correct case"></a>
  <a href="https://i.stack.imgur.com/Bnwqt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bnwqt.png" alt="Overflowing case"></a></p>