4

我正在开发一个 flexbox 侧边栏菜单，但似乎在flex: 0 1 auto具有固有大小min-height的容器之间遇到冲突，导致容器缩小到允许的最小值以下。

JSFiddle 链接（与下面的片段相同）

摘要/预期行为

  • 菜单跨越整个垂直屏幕空间，由任意数量的minimizable-group容器组成，这些容器整齐地堆叠在一起。
  • 每个组都有一个flex: none标题/标题和一个灵活的容器minimizable-group-content
  • 有两种组内容类型：
    • .unshrinkable对于应该对用户完全可见的重要控制元素（片段中的红色框）
    • .shrinkable对于潜在的巨大列表，允许缩小到某个最小高度（片段中的蓝色框）
  • 用户可以折叠每个可最小化的组（⮟ 按钮）——该部分目前工作正常。

问题

在片段中，您可以看到所有三个可最小化的组（全屏）。然而，第 2 组中不可收缩的内容被挤在一起，除非我折叠第 1 组或第 3 组

从开发控制台看，问题似乎出在minimizable-group-content. 里面的红色.unshrinkable框显示了一个合理的计算高度（18 像素），但是封装容器的计算高度只有 ~5px，并且无论我扔给它什么 CSS 都拒绝调整大小。

我可以设置任何其他属性来防止我的弹性盒子缩小到最小高度吗？或者我可以用不同的方法获得预期的行为吗？

（不相关的：

片段

Array.from(document.getElementsByClassName("minimizable-group")).forEach((element) => {
  element.children[0].addEventListener('click', () => {
    element.children[0].classList.toggle('minimized');
    element.children[1].classList.toggle('minimized');
  });
});
* {
  min-height: 0px;
}

html,
body {
  position: absolute;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 300px;
}

body {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  overflow-y: auto;
}

.minimizable-group {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  overflow-y: hidden;
}

.minimizable-group-title {
  flex: none;
}

.minimizable-group-content {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  overflow-y: auto;
  min-height: min-content !important;
}

.unshrinkable {
  flex: none;
  min-height: max-content !important;
}

.shrinkable {
  flex: 0 1 auto;
  overflow-y: auto;
  min-height: 1em;
}


/*********************************/
/*    IRRELEVANT STUFF BELOW     */

.minimizable-group-title {
  cursor: pointer;
  color: #aaa;
  background-color: #333;
  font-weight: bold;
}

.minimizable-group-title::before {
  content: '⮟ ';
}

.minimizable-group-title.minimized::before {
  content: '➤ ';
}

.minimizable-group-content.minimized {
  max-height: 0px;
  visibility: hidden;
}

.unshrinkable {
  background-color: #ffcccb;
}

.shrinkable {
  background-color: #add8e6;
}
<div class="container">
  <div class="minimizable-group">
    <div class="minimizable-group-title">Group 1</div>
    <div class="minimizable-group-content">
      <div class="unshrinkable">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
      <div class="shrinkable">Amet venenatis urna cursus eget nunc. Sapien nec sagittis aliquam malesuada. Tortor vitae purus faucibus ornare suspendisse. Cursus eget nunc scelerisque viverra mauris in aliquam sem. Et leo duis ut diam quam. Nisl suscipit adipiscing bibendum
        est ultricies integer quis auctor. Volutpat maecenas volutpat blandit aliquam etiam erat. Fames ac turpis egestas integer eget aliquet nibh. Enim praesent elementum facilisis leo vel. Enim facilisis gravida neque convallis a. Et magnis dis parturient
        montes nascetur ridiculus mus mauris vitae. Amet est placerat in egestas.
        <p /> Vel eros donec ac odio tempor. Purus gravida quis blandit turpis cursus in hac habitasse platea. In aliquam sem fringilla ut morbi tincidunt augue interdum. Diam ut venenatis tellus in metus. Vitae purus faucibus ornare suspendisse sed nisi lacus
        sed. Velit sed ullamcorper morbi tincidunt. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Augue mauris augue neque gravida in fermentum. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Sem et tortor consequat
        id. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Eros donec ac odio tempor orci dapibus ultrices.
      </div>
      <div class="unshrinkable">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </div>
  </div>
  <div class="minimizable-group">
    <div class="minimizable-group-title">Group 2</div>
    <div class="minimizable-group-content">
      <div class="unshrinkable">Elementum sagittis vitae et leo duis</div>
    </div>
  </div>
  <div class="minimizable-group">
    <div class="minimizable-group-title">Group 3</div>
    <div class="minimizable-group-content">
      <div class="unshrinkable">Facilisis volutpat est velit egestas dui id ornare arcu odio. Duis ultricies lacus sed turpis tincidunt id.</div>
      <div class="shrinkable">Amet venenatis urna cursus eget nunc. Sapien nec sagittis aliquam malesuada. Tortor vitae purus faucibus ornare suspendisse. Cursus eget nunc scelerisque viverra mauris in aliquam sem. Et leo duis ut diam quam. Nisl suscipit adipiscing bibendum
        est ultricies integer quis auctor. Volutpat maecenas volutpat blandit aliquam etiam erat. Fames ac turpis egestas integer eget aliquet nibh. Enim praesent elementum facilisis leo vel. Enim facilisis gravida neque convallis a. Et magnis dis parturient
        montes nascetur ridiculus mus mauris vitae. Amet est placerat in egestas.
        <p /> Vel eros donec ac odio tempor. Purus gravida quis blandit turpis cursus in hac habitasse platea. In aliquam sem fringilla ut morbi tincidunt augue interdum. Diam ut venenatis tellus in metus. Vitae purus faucibus ornare suspendisse sed nisi lacus
        sed. Velit sed ullamcorper morbi tincidunt. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Augue mauris augue neque gravida in fermentum. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Sem et tortor consequat
        id. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Eros donec ac odio tempor orci dapibus ultrices.</div>
    </div>
  </div>
</div>

4

0 回答 0