Imagine you have a div with a flexible width (like min-width 200px and max-width 1000px). Let's refer to this div as Div1. The goal is to enclose this div in a parent div that adjusts its size to fit Div1 without impacting Div1's width whatsoever.
I've come across suggestions to make a parent element conform to the size of its contents by setting its display property to inline-block. However, whenever I attempt this, it appears to force the contents to their minimum width. To illustrate, consider two divs with identical attributes but one is constrained to its minimum width due to being within a parent container set to display: inline-block.
HTML & CSS code:
<div class="container">
<div class="div-with-min-width">
This div is compelled to its minimum width.
</div>
</div>
<div class="div-with-min-width">
This div retains original width.
</div>
.div-with-min-width {
border: 1px red solid;
background: red;
color: yellow;
min-height: 100px;
min-width: 200px;
max-width: 1000px;
}
.container {
border: 4px green solid;
display: inline-block;
}
Is there a way to make the parent adjust to the child's width without altering the child's own width?