Question

如果表格间隙和网格项的总高度超过分配给content-right的85％的高度，尽管有某些原因，main-nav开始失去其高度，直到其高度变为0为止flex-shrink: 0。

有人知道发生了什么吗？

:root {
  --left-width: 25%;
  --right-width: 75%;
  --gap: 25px;
}

body {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
}

#main-nav {
  width: 100%;
  flex: 15;
  flex-shrink: 0; /**/
  display: flex;
}

#nav-left {
  width: var(--left-width);
  height: 100%;
  background: skyblue;
}

#nav-right {
  width: var(--right-width);
  height: 100%;
  padding: 0 var(--gap);
  background: pink;
}

#main-content {
  width: 100%;
  flex: 85;
  flex-shrink: 0; /**/
  display: flex;
}

#content-left {
  width: var(--left-width);
  height: 100%;
  background: pink;
}

#content-right {
  width: var(--right-width);
  height: 100%;
  padding: 0 var(--gap);
  background: skyblue;
}

#grid-cont {
  width: 100%;
  height: 100%;
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(4, auto);
}

.grid-item {
  min-width: 200px;
  height: 300px;
  background: beige;
}

<body>
  <div id='main-nav'>
    <div id='nav-left'></div>
    <div id='nav-right'></div>
  </div>
  <div id='main-content'>
    <div id='content-left'>
    </div>
    <div id='content-right'>
      <div id='grid-cont'>
        <div class='grid-item'></div> <!-- issue with grid items and main-nav on firefox -->
        <div class='grid-item'></div>
        <div class='grid-item'></div>
        <div class='grid-item'></div>

        <div class='grid-item'></div>
        <div class='grid-item'></div>
        <div class='grid-item'></div>
        <div class='grid-item'></div>

        <div class='grid-item'></div>
        <div class='grid-item'></div>
        <div class='grid-item'></div>
        <div class='grid-item'></div>

        <div class='grid-item'></div>
        <div class='grid-item'></div>
        <div class='grid-item'></div>
        <div class='grid-item'></div>

        <div class='grid-item'></div>
        <div class='grid-item'></div>
        <div class='grid-item'></div>
        <div class='grid-item'></div>

        <div class='grid-item'></div>
        <div class='grid-item'></div>
        <div class='grid-item'></div>
        <div class='grid-item'></div>
      </div>
    </div>
  </div>
</body>

固定高度元素在Firefox上将其他元素强制设为零高度

0 个答案: