CODEWITHSUNDEEP
javascripthtmlcssflexbox
Jim Burch
Jim Burch

Reputation: 21

Expand Parent Container Only As Wide as Children Max-Widths

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).

Upvotes: 0

Views: 99

Answers (1)

rootShiv
rootShiv

Reputation: 1427

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>

Upvotes: 1

Related Questions