I have a parent container with flex-direction: row and several child elements with a max-width. I'm trying to get the parent to expand as wide as the child elements under their max widths but no wider.
parent {
display: flex;
flex-direction: row;
width: 100%;
}
child {
max-width: 100px;
}<div className={parent}>
<div className={child}>Child 1</div>
<div className={child}>Child 2</div>
<div className={child}>Child 3</div>
</div>This expands the parent across the available view, which I don't want because it's push over another element I have in an adjacent column, creating an awkward gap.
But if I change the width to something like fit-content, it collapses the child elements smaller than their max widths.
How do I make the parent container as wide as the child max-widths, but no wider (while also being able to shrink the child elements if the window size condenses).
You should use display: inline-flex and remove width:100% from parent.
$(document).ready(function () {
$("[type=range]").change(function () {
const width = $(this).val();
$('.child').css('width',width+"px")
});
});.parent {
display: flex;
flex-direction: row;
border:3px solid red;
display: inline-flex;
}
.child {
max-width: 200px;
height: 20px;
background: lightblue;
margin: 5px;
padding:5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 1</div>
<div class="child">Child 1</div>
<div class="child">Child 1</div>
</div>
<div class="range-container">
<input type="range" id="points" name="points" min="50" max="200">
</div>