I am attempting to display text within a bordered div that is positioned absolutely inside another div.
Option 1 using width:auto; - view fiddle: https://jsfiddle.net/c21kt6r4/ The issue here is that the box on the left side expands excessively.
https://i.sstatic.net/etGvR.png
Option 2 - using width:min-content; - view fiddle: https://jsfiddle.net/ay159rw6/2/ The problem with this option is that the text in the right side box wraps around.
https://i.sstatic.net/vndAC.png
What is the best way to wrap text in a div and ensure the border displays correctly for both single and multi-line texts?
For the HTML reference:
<div class="main">
<div class="item" style="left:0;">
<label>SHAMPOO & CONDITIONER</label>
</div>
<div class="item" style="left:165px;">
<label>WHAT EVER</label>
</div>
</div>
And CSS:
.main{
position:relative;
border:solid black 1px;
width:400px;
height:400px;
}
.item{
border:solid blue 1px;
width:160px;
height:150px;
position: absolute;
}
.item label{
position:absolute;
bottom:5%;
left:5%;
border:solid red 1px;
padding:5px;
display:inline-block;
font-size:12px;
width:min-content;
}