JSFiddle - React, Tailwind, and code Playground

by blueseal

HTML

<div id="view1">
	<div id="FlexGroup">
		<div id="content">
			<span>How to make container size to content. How to make container size to content. How to make containntto content. How to make container size to content. How to make</span>
		</div>
	</div>
	
</div>

CSS

* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		border: none;
	}
	#view1 {
		position: absolute;
		background: #E5E5E5;
		width: 671px;
		height: auto;
		background-color: rgba(232,232,232,1);
		overflow: visible;
    border: 1px solid red;
	}
	#FlexGroup {
		position: relative;
		width: 589px;
    /* height:auto; */
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: space-between;
		flex-wrap: nowrap;
		overflow: visible;
		gap:  30px;
    
	}
	#content {
		position: relative;
		align-self: auto;
		overflow: visible;
		width: 590px;
		text-align: left;
		font-family: Malayalam Sangam MN;
		font-style: normal;
		font-weight: normal;
		font-size: 20px;
		color: rgba(34,44,65,1);
	}

JavaScript

var text = document.getElementById("content");

 text.innerText = document.body.innerText + document.body.innerText + document.body.innerText+ document.body.innerText;