How to match width of text to width of dynamically sized image/title?

Question

Please see this codepen: https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0

Answer 1

Make the container inline-block (or any shrink-to-fit configuration like table,inline-grid,inline-flex, float,absolute etc) then force the width of text to be 0 so the width of the container is defined by the image (the text doesn't contribute to the width) then force the width again to be 100% using min-width

.parent {
  background: pink;
  display:inline-block;
}

img {
  display: block;
  max-height: 70vh;
}

.description {
  width:0;
  min-width:100%;
}

    
  

    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  

The same trick work even without image where you need any element to be sized based on another one.

Example with text defining the size of another text:

.parent {
  background: pink;
  display:inline-block;
}

.description {
  width:0;
  min-width:100%;
}

   
a title that will define the width
  

    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  

Example with text defining the size of the image (the opposite of the first snippet)

.parent {
  background: pink;
  display:inline-block;
}

img {
  width:0;
  min-width:100%;
}

    
   
a title that will define the width



    
   
define the width



    
   
very small

It can also work with complex structure.

Example using CSS grid:

.container {
  display: inline-grid;
  border: 1px solid;
  grid-template-columns: auto auto;
}
.container > div {
  padding:2px;
  border:1px solid green;
}
.auto {
  grid-column:1/-1;
  width:0;
  min-width:100%;
}

  
some text here
  
and here
  





  
some text here
  
and a long one here
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare lacus at nisi laoreet, a fermentum augue vestibulum. Cras convallis ultrices quam, ac fermentum nibh posuere eu. Cras in pellentesque lorem. In et condimentum justo. Phasellus scelerisque nisi vitae vestibulum volutpat. Duis sit amet augue 

another one with table:

table {
  display: table;
  border:1px solid green;
}

td {
  padding: 5px;
  text-align: center;
  border:1px solid green;
}

.auto {
  width: 0;
  min-width: 100%;
  display: block;
}

  

    
text 
    
more text
    
A
  
  

    

  



  

    
long text here
    
more text
    
AAAAAAAA
  
  

    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare lacus at nisi laoreet, a fermentum augue vestibulum. Cras convallis ultrices quam, ac fermentum nibh posuere eu. Cras in pellentesque lorem. In et condimentum justo. Phasellus scelerisque nisi vitae vestibulum volutpat. Duis sit amet augue