html - Flexbox/由于嵌套元素而扩展高度

标签 html css flexbox

我有一个不断增长的深层嵌套元素，我正在尝试使用 Flexbox 使其外部容器适应其高度。尝试让“橙色”元素垂直拉伸(stretch)以包含以下笔中最内部的文本:https://codepen.io/cssbog/pen/KKzgxgd 

    <ol class="menu-item-list">
  <li id="menu-item-las-powr" class="menu-item control-slider active">
    <div class="label">Label</div>
    <div class="value">
      <div class="slider-view"> 
        <div class="slider-box">
          <div class="safe-slider">    
            <div class="slider-val-line-parent">
              <div class="slider-val-text">
                BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
</ol>

最佳答案

更新
正如我在评论中已经说过的。您无法单独更改元素的高度，它们都处于父子关系中。

您应该考虑使用更少的标记，并且也许使用不同的方法来实现相同的目的。如果与样式有关，您可以使 .value 随 .slider-val-text 一起增长，并使用独立的 absolute 元素进行绘制.slider-val-text (您只需添加足够的填充并在顶部绘制该绿色框背景即可)。

但是，您可以为 .value 容器设置固定高度。尝试高度:168px。问题是，它不会根据您在 .slider-val-text 中输入的文本而改变。

一旦 DOM 完成加载，您可以使用 JavaScript 并根据 .slider-val-text 的高度设置 .value 容器的高度。

document.addEventListener("DOMContentLoaded", function() {
  const childHeight = document.querySelector('.slider-val-text').offsetHeight;
  const parent = document.querySelector('.value');
  let verticalPadding = parseInt(window.getComputedStyle(parent, null).getPropertyValue('padding-top'));
  verticalPadding += parseInt(window.getComputedStyle(parent, null).getPropertyValue('padding-bottom'));
  parent.style.height = childHeight + verticalPadding + 'px';
});
.menu-item-list {
  position: absolute;
  top: 2em;
  left: 1em;
  right: 40%;
}

.menu-item-list li {
  display: flex;
}

.menu-item-list .control-slider .value {
  box-sizing: border-box;
  /* ADDED */
  padding: 0 1em 0 0;
}

.menu-item-list .control-slider .slider-view {
  width: 100%;
  padding: 0;
  display: flex;
}

.menu-item-list .control-slider .slider-view .slider-val-line-parent {
  padding: 0;
  text-align: right;
  display: flex;
  flex-flow: column wrap;
  /*position: absolute; REMOVED */
  left: 0;
}

.menu-item-list .control-slider .slider-view .slider-val-line-parent .slider-val-text {
  flex: 1;
  /* width: calc(100% + 16px); REMOVED */
  /*right: 7px;
  position: relative;
  top: 36px; REMOVED */
  padding-top: 36px;
  padding-right: 0px;
  padding-left: 0px;
  font-size: 14px;
  justify-content: right;
}

.menu-item-list .control-slider .slider-box {
  height: 1.5em;
  padding: 0.1em 0.25em;
  width: 50%;
  position: relative;
  background-color: purple;
  opacity: 50%;
}

.menu-item-list .control-slider .slider-box .safe-slider {
  background-color: green;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

.menu-item-list .control-slider .slider-box .safe-slider .slider-val-line-parent {
  border-style: dashed;
  border-color: black;
  display: flex;
}

.menu-item-list .menu-item {
  background-color: orange;
}

.menu-item-list .menu-item .label {
  width: 57%;
  background-color: yellow;
  opacity: 50%;
}

.menu-item-list .menu-item .value {
  width: 43%;
}

.menu-item-list .menu-item.active.control-slider {
  display: flex;
  flex-direction: column;
}

.menu-item-list .menu-item.active.control-slider .label {
  width: 100%;
  margin: 0;
}

.menu-item-list .menu-item.active.control-slider .value {
  width: 100%;
  padding: 1em 1em 1.5em;
}
<ol class="menu-item-list">
  <li id="menu-item-las-powr" class="menu-item control-slider active">
    <div class="label">Label</div>
    <div class="value">
      <div class="slider-view">
        <div class="slider-box">
          <div class="safe-slider">
            <div class="slider-val-line-parent">
              <div class="slider-val-text">
                BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO
                BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
</ol>

您不能在static上下文中使用绝对定位并期望它们改变static元素的大小。它们位于独立的层上。如果您想知道:Static 元素是默认元素，即如果您没有指定位置，则它是 position: static。

位置属性对于理解至关重要。我建议你阅读这篇mdn article here .

我用过这个converter tool here将您的 SASS 代码转换为 CSS 以提供代码片段。

请告诉我这是否是您的想法。

.menu-item-list {
  position: absolute;
  top: 2em;
  left: 1em;
  right: 40%;
}

.menu-item-list li {
  display: flex;
}

.menu-item-list .control-slider .value {
  padding: 0 1em 0 0;
  box-sizing: border-box;
}

.menu-item-list .control-slider .slider-view {
  width: 100%;
  padding: 0;
  display: flex;
}

.menu-item-list .control-slider .slider-view .slider-val-line-parent {
  padding: 0;
  text-align: right;
  display: flex;
  flex-flow: column wrap;
  left: 0;
}

.menu-item-list .control-slider .slider-view .slider-val-line-parent .slider-val-text {
  flex: 1;
  padding-right: 0px;
  padding-left: 0px;
  font-size: 14px;
  justify-content: right;
}

.menu-item-list .control-slider .slider-box {
  padding: 0.1em 0.25em;
  width: 50%;
  background-color: purple;
  opacity: 50%;
}

.menu-item-list .control-slider .slider-box .safe-slider {
  background-color: green;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

.menu-item-list .control-slider .slider-box .safe-slider .slider-val-line-parent {
  border-style: dashed;
  border-color: black;
  display: flex;
}

.menu-item-list .menu-item {
  background-color: orange;
}

.menu-item-list .menu-item .label {
  width: 57%;
  background-color: yellow;
  opacity: 50%;
}

.menu-item-list .menu-item .value {
  width: 43%;
}

.menu-item-list .menu-item.active.control-slider {
  display: flex;
  flex-direction: column;
}

.menu-item-list .menu-item.active.control-slider .label {
  width: 100%;
  margin: 0;
}

.menu-item-list .menu-item.active.control-slider .value {
  width: 100%;
  padding: 1em 1em 1.5em;
}
<ol class="menu-item-list">
  <li id="menu-item-las-powr" class="menu-item control-slider active">
    <div class="label">Label</div>
    <div class="value">
      <div class="slider-view">
        <div class="slider-box">
          <div class="safe-slider">
            <div class="slider-val-line-parent">
              <div class="slider-val-text">
                BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO
                BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO BOO
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
</ol>

这是 SASS 代码。我已使用 (ADDED) 或 (REMOVED) 标记修改的行，其他注释已经存在。

.menu-item-list {
  position: absolute;
  top: 2em;
  left: 1em;
  right: 40%;

  li {
    display: flex;
  }

  .control-slider {
    .value {
      padding: 0 1em 0 0;
      box-sizing: border-box; // (ADDED)
    }

    .slider-view {
      width: 100%;
      padding: 0;
      display: flex;

      .slider-val-line-parent {
        padding: 0;
        // height: 100%;
        text-align: right;
        // display: none;
        display: flex;
        flex-flow: column wrap;
        // position: absolute; (REMOVED)
        left: 0;

        .slider-val-text {
          flex: 1;
          //width: calc(100% + 16px); (REMOVED)
          //right: 7px; (REMOVED)
          //position: relative; (REMOVED)
          //top: 36px; (REMOVED)
          padding-right: 0px;
          padding-left: 0px;
          font-size: 14px;
          justify-content: right;
          // height: auto;
        }
      }
    }

    .slider-box {
      //height: 1.5em; (REMOVED)
      padding: 0.1em 0.25em;
      width: 50%;
      //position: relative; (REMOVED)
      background-color: purple;
      opacity: 50%;

      .safe-slider {
        background-color: green;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%; // without this, slider fill disappears
        position: relative;

        .slider-val-line-parent {
          border-style: dashed;
          border-color: black;
          // display: inline-block;
          display: flex;
        }
      }
    }
  }

  .menu-item {
    background-color: orange;
    // height: auto;
    .label {
      width: 57%;
      background-color: yellow;
      opacity: 50%;
    }
    .value {
      width: 43%;
    }
  }

  .menu-item.active.control-slider {
    // display: list-item;
    display: flex;
    flex-direction: column;

    .label {
      width: 100%;
      margin: 0;
    }

    .value {
      width: 100%;
      padding: 1em 1em 1.5em;
    }
  }
}

关于html - Flexbox/由于嵌套元素而扩展高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63497385/

上一篇：git - 如何查看 github fork 是否可能比原来的更远？

下一篇：vue.js - Vue 没有定义 Bootstrap-vue

相关文章：

Jquery 打开/关闭导航

javascript - 使用 javascript 和 jquery 为一串值编写 HTML？

html - 为什么我的下拉菜单在 IE 中不起作用？

html - 动态侧边栏宽度取决于主 div

html - 将 flexbox 用于布局和菜单/其他子组件的良好做法？

html - Flexbox 布局，左侧有两个元素，右侧有一个元素

html - WebKit/Blink 渲染文档不好

php - 将自定义类添加到 wordpress 中的每个小部件，你的方法是什么？

html - header 后 <p> 标记中的我的文本被挤入 header 。我应该如何改变它？

javascript - 未知高度容器中的文本元素

©2024 IT工具网  联系我们