Fit an image inside an auto grid

Question

Fiddle

<div id="grid">
  <div id="toolbar">
    <div>
    Some writing.
    </div>
    <img src="some-link" alt="">
  </div>
  <div id="main">Main view</div>

</div>

#grid {
  display:grid;
  grid-template-columns: auto 1fr;
}

#toolbar {
  display:flex;
  flex-direction:column;
}

Is it possible to force the image to take only as much as width as the text does?

I've got a toolbar with icons that I'd like to have an image on the bottom. The icons decide the width of the toolbar (which resides inside an auto cell of a grid), and I'd like the image to fit exactly that width.

Answer 1

By adding width to toolbar you can achieve this.

#toolbar {
  display:flex;
  flex-direction:column;
  background-color: rgb(225, 225, 220);
     width: 99px;
}
img{
  max-width: 100%;
        max-height: 100%;
}

https://jsfiddle.net/3fydzgxp/2/

Other option you can try using jQuery or javascript by capturing width for text div and applied to img style.

<div id="grid">
  <div id="toolbar">
    <div id="text">
    Some writing.
    </div>
    <img src="https://smallimg.pngkey.com/png/small/197-1978960_free-new-icon-download-google-chrome-icon-redesign.png" alt="" id="imagetag">
  </div>
  <div id="main">Main view</div>

</div>

console.log(document.getElementById("text").offsetWidth);

document.getElementById("imagetag").style.width=document.getElementById("text").offsetWidth;