CODEWITHSUNDEEP
htmlcssflexbox
Mustang
Mustang

Reputation: 604

Parent flexbox to grow/shrink based on another flexbox

I have a parent div with flexbox in it. There is a flexbox to the right of the parent div.

The right flexbox can have 1, 2 or 3 items that will make it grow/shrink.

I would like the parent div to shrink/grow based on the items in the flexbox to the right.

I thought the parent div will do it automatically but it does not happen that way.

Please advise what is going wrong.`

Here's my codepen example. 

.overlay {
  bottom: 0;
  display: block;
  height: 48px;
  left: 65px;
  padding: 0;
  position: absolute;
  right: 255px;
  z-index: 4;
  background-color: cyan
}

.overlay-range {
  display: flex;
}

.inner {
  position: absolute;
  display: flex;
  right: -8em;
  background-color: red;
  padding: 5px;
  bottom: 20px;
}

span {
  width: 30px;
}
<div class="overlay">
  <div class="overlay-range">
    <input type="range">
  </div>
  <div class="inner">
    <span> + </span>
    <span> - </span>
    <span> * </span>
    <span> % </span>
    <span> / </span>
  </div>
</div>

Upvotes: 1

Views: 129

Answers (1)

Asons
Asons

Reputation: 87191

The main issue here is that your inner is using absolute positioning.

An absolute positioned element is taken out of flow and as such will not affect its parent.

If you e.g. make the overlay a flex container, remove position: absolute on the inner, you can use auto margin on the inner, and right align it.

Stack snippet

.overlay {
    bottom: 0;
    display: flex;
    height: 48px;
    left: 65px; 
    padding: 0;
    position: absolute;
    right: 255px;
    z-index: 4;
    background-color: cyan
}

.overlay-range{
  display: flex;
}

.inner {
    display: flex;
    background-color: red;
    padding: 5px;
    bottom: 20px;
    margin-left: auto;
    align-self: flex-start;
   }

span {
  width: 30px;
}
<div class="overlay">
  <div class="overlay-range">
    <input type="range"></div>
   <div class="inner">
     <span> + </span>
     <span> - </span>
     <span> * </span>
     <span> % </span>
     <span> / </span>
   </div>
</div>

For the overlay to also adjust its width, remove the right: 255px on the overlay.

When done like this, you can also remove the newly added margin-left: auto, since it won't have any effect anymore.

Stack snippet

.overlay {
    bottom: 0;
    display: flex;
    height: 48px;
    left: 65px; 
    padding: 0;
    position: absolute;
    z-index: 4;
    background-color: cyan
}

.overlay-range{
  display: flex;
}

.inner {
    display: flex;
    background-color: red;
    padding: 5px;
    bottom: 20px;
    align-self: flex-start;
   }

span {
  width: 30px;
}
<div class="overlay">
  <div class="overlay-range">
    <input type="range"></div>
   <div class="inner">
     <span> + </span>
     <span> - </span>
     <span> * </span>
     <span> % </span>
     <span> / </span>
   </div>
</div>

Technically, you could keep display: block on overlay, and change the display: flex to display: inline-flex (so they line up side-by-side), though I find the previous version better.

.overlay {
  bottom: 0;
  display: block;
  height: 48px;
  left: 65px;
  padding: 0;
  position: absolute;
  z-index: 4;
  background-color: cyan
}

.overlay-range {
  display: inline-flex;
}

.inner {
  display: inline-flex;
  background-color: red;
  padding: 5px;
  bottom: 20px;
}

span {
  width: 30px;
}
<div class="overlay">
  <div class="overlay-range">
    <input type="range">
  </div>
  <div class="inner">
    <span> + </span>
    <span> - </span>
    <span> * </span>
    <span> % </span>
    <span> / </span>
  </div>
</div>

Upvotes: 1

Related Questions