左div上的SVG可调整大小，右CSS上右上的div

Question

我要创建一个包含两个div的容器： 第1个div（左侧）包含可调整大小的svg 第2格（右侧）包含文字

我的问题是，当我调整浏览器大小时，第二个div与第一个div重叠... 下图描述了我要获得的结果：

另一个问题是，当我调整浏览器的大小时，div TEXT不得位于div svg下方或上方。

提前感谢您的回复

Answer 1

在这种情况下，我将使用flexbox。 .svgdiv{flex:1 1 100%}。这意味着div可以缩小，可以增长并占用所有可用空间。 .textdiv{flex:0 0 160px;}无法缩小，无法增长，并且宽度始终为160px。

#wrap{display:flex;border:1px solid;}
#wrap div{border:1px solid;margin:1em; padding:1em;}
.textdiv{flex:0 0 160px;}
.svgdiv{flex:1 1 100%}

<div id="wrap">
  <div class="svgdiv">
    <svg
	 viewBox="0 0 220.093 97.866" >
<path id="bone" d="M109.567,77.272c-15.662,0-31.325,0.067-46.985-0.061
	c-2.872-0.023-4.295,0.844-5.615,3.525c-7.676,15.599-26.02,21.57-41.052,13.61C0.698,86.29-4.548,67.584,4.39,52.351
	c1.605-2.736,1.305-4.475-0.195-7.043C-4.498,30.419,0.784,11.672,15.73,3.636C30.677-4.4,49.2,1.498,56.876,17.03
	c1.442,2.918,3.038,3.655,6.054,3.64c31.323-0.15,62.646-0.207,93.969-0.141c3.204,0.007,4.961-0.831,6.516-3.822
	c8.201-15.792,26.547-21.248,41.637-12.645c14.719,8.392,19.408,26.879,10.38,41.947c-1.495,2.496-0.962,4.025,0.269,6.151
	c7.455,12.87,5.242,28.401-5.264,37.779c-10.969,9.789-27.302,10.546-38.928,1.337c-3.159-2.503-5.958-5.954-7.749-9.553
	c-1.813-3.644-4.026-4.445-7.709-4.405c-15.493,0.166-30.988,0.07-46.482,0.07C109.567,77.351,109.567,77.312,109.567,77.272z
	 M210.979,30.262c-0.388-2.27-0.458-4.652-1.219-6.789c-3.137-8.809-10.701-14.133-19.688-14.133
	c-8.855,0-16.76,5.404-19.508,14.287c-1.52,4.911-4.051,6.243-8.982,6.213c-34.146-0.202-68.296-0.215-102.443,0.007
	c-5.255,0.034-8.032-1.192-9.749-6.575c-2.642-8.284-8.916-13.122-17.738-13.818c-9.017-0.712-16.017,3.065-20.03,11.147
	c-3.941,7.938-3.433,15.948,2.631,22.736c3.554,3.978,3.927,6.985,0.101,10.992c-5.417,5.674-6.238,12.77-3.966,19.986
	c2.742,8.713,10.345,14.087,19.051,14.176C38.68,88.587,46.653,83.31,49.531,74.3c1.542-4.828,3.981-6.295,8.965-6.266
	c34.813,0.211,69.629,0.168,104.444,0.035c3.993-0.015,5.971,1.309,7.189,5.127c2.754,8.629,8.559,14.291,17.82,15.174
	c9.145,0.871,16.372-2.891,20.527-11.167c4.212-8.389,3.154-16.499-3.271-23.497c-3.067-3.342-3.172-6.139-0.057-9.46
	C208.771,40.385,211.237,35.915,210.979,30.262z"/>
</svg>
  </div> 
  <div class="textdiv">This is some description</div>
</div>