[David Hoang]

I’m trying to wrap an IMG inside a span, so its parent DIV would have a width of this img + the span.

.mainDiv {
    height: max-content;
    width: max-content;
    border: 1px solid #bebdbd;
    padding: 5px;
}

/*
.mainText {
    display: flex;
}*/

.mainImg {
    float: left;
    max-width: 20px;
}

<div class="mainDiv">
  <span class="mainText">
    <img src="https://testfabric.net/icons/document.svg" class="mainImg"/>
    line_1<br>
    line_2
  </span>
</div>

If I use flex for the span, it breaks the line after the IMG.

If I don’t – ‘width: max-content’ for the parent DIV is not working. Also the text doesn’t wrap the IMG.

The third pic – what I’m extecting to have.

What am I doing wrong?

PS: the common advise is to use ‘float: left’ for the IMG. As you see – it’s not working here.

UPD: the error replicates only when I insert a SVG as IMG. If a JPG is used, it works fine (without flex)

[David Hoang]

Due to the viewbox of the SVG, it adds an extra 16px width.
We have to decrease that, and adjust the width and the padding-right, like so:

.mainDiv {
    height: max-content;
    width: max-content;
    border: 1px solid #bebdbd;
    padding: 5px;
}

.mainImg {
    float: left;
    max-width: 14px; padding-right: 6px;
}

<div class="mainDiv">
  <span class="mainText">
    <img src="https://www.sanci.hu/document-mod.svg" class="mainImg"/>
    line_1<br>
    line_2
  </span>
</div>

The SVG data is the following:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   data-name="Layer 1"
   viewBox="0 0 44 56"
   id="document"
   version="1.1"
   sodipodi:docname="document-mod.svg"
   width="44"
   height="56"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="namedview4"
     pagecolor="#ffffff"
     bordercolor="#000000"
     borderopacity="0.25"
     inkscape:showpageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:deskcolor="#d1d1d1"
     inkscape:zoom="9.25"
     inkscape:cx="21.891892"
     inkscape:cy="28"
     inkscape:window-width="1440"
     inkscape:window-height="830"
     inkscape:window-x="-6"
     inkscape:window-y="-6"
     inkscape:window-maximized="1"
     inkscape:current-layer="document" />
  <polygon
     fill="#ffffff"
     points="41,5 41,17 53,17 53,59 11,59 11,5 "
     id="polygon1"
     style="display:inline"
     transform="translate(-10,-4)" />
  <polygon
     fill="#cfd8dc"
     points="53,17 41,17 41,5 "
     id="polygon2"
     style="display:inline"
     transform="translate(-10,-4)" />
  <rect
     width="42"
     height="3"
     x="1"
     y="52"
     fill="#cfd8dc"
     id="rect2"
     style="display:inline" />
  <path
     fill="#cfd8dc"
     d="m 43,13 v 2 H 30 A 1,1 0 0 1 29,14 V 1 h 2 v 12 z"
     id="path2" />
  <path
     fill="#01579b"
     d="M 43.92,12.61 A 1,1 0 0 0 43.7,12.29 l -12,-12 A 1,1 0 0 0 31,0 H 1 A 1,1 0 0 0 0,1 v 54 a 1,1 0 0 0 1,1 h 42 a 1,1 0 0 0 1,-1 V 13 A 1,1 0 0 0 43.92,12.61 Z M 32,3.41 40.59,12 H 32 Z M 2,54 V 2 h 28 v 11 a 1,1 0 0 0 1,1 h 11 v 40 z"
     id="path3" />
  <path
     fill="#78909c"
     d="M 33,18 H 11 a 1,1 0 0 1 0,-2 h 22 a 1,1 0 0 1 0,2 z m 0,6 H 11 a 1,1 0 0 1 0,-2 h 22 a 1,1 0 0 1 0,2 z m 0,6 H 11 a 1,1 0 0 1 0,-2 h 22 a 1,1 0 0 1 0,2 z m 0,6 H 11 a 1,1 0 0 1 0,-2 h 22 a 1,1 0 0 1 0,2 z m 0,6 H 11 a 1,1 0 0 1 0,-2 h 22 a 1,1 0 0 1 0,2 z"
     id="path4" />
</svg>

[Author]

Posts