I have a div
. I want to have another div2
with width
to be auto
(self-adjustable). But width: auto
doesn’t work. div2
needs to be aligned to the left.
.parent {
background: lightblue;
display: block;
padding: 10px;
}
.child {
border: 2px solid green;
display: flex;
padding: 10px;
///////////
width: auto;
}
<div class='parent'>
<div class='child'>
<span>
Some text
</span>
</div>
</div>
Just like this, but without width: fit-content
.
.parent {
background: lightblue;
padding: 10px;
display: block;
}
.child {
border: 2px solid green;
border-radius: 4px;
padding: 10px;
width: fit-content;
}
<div class='parent'>
<div class='child'>
<span>
Some text
</span>
</div>
</div>
P.S. Cannot use display: inline-block
for child
div. Cannot touch/edit parent
div, all css need to remain the same. Cannot use width: max-content
, width: min-content
and width: fit-content