父Flexbox基于另一个flexbox增长/缩小

Question

我有一个带有flexbox的父div。父div的右侧有一个flexbox。

右侧的flexbox可以有1,2或3个项目，可以使它增长/缩小。

我希望父div根据右侧的flexbox中的项目缩小/增长。

我认为父div会自动执行，但不会发生这种情况。

请告知出了什么问题。

这是我的codepen example。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这里的主要问题是你的inner正在使用绝对定位。

绝对定位元素将从流中取出，因此不会影响其父元素。

如果你是将overlay设为灵活容器，删除position: absolute上的inner，您可以在inner上使用自动边距，然后右对齐。

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>

要让overlay也调整其宽度，请移除right: 255px上的overlay。

完成此操作后，您还可以删除新添加的margin-left: auto，因为它不再具有任何效果。

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>

从技术上讲，您可以将display: block保留在overlay上，并将display: flex更改为display: inline-flex（因此它们会并排排列），但我发现以前的版本更好。

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