css 溢出：滚动无法与flex一起正常工作：1

ua4mk5z4 于 2023-05-08 发布在其他

关注(0)|答案(2)|浏览(128)

我正在用html/sass/js为我的.net core web api编写的web API构建前端。我遇到了一些小问题，我挣扎了几个小时，我不知道该怎么解决这个问题。
说到这里，我想构建sidenav，在那里使用JS动态添加信息。简化它看起来像这样：

<body>
    <div class="container">
      <div class="container-search">
        <header class="header">
          [...not important code...]
        </header>
        <div class="content search-content">
          <nav class="sidenav">
            <h3 class="sidenav__text"></h3>
            <form action="#" class="sidenav__searchbar">
              <input
                type="text"
                class="sidenav__searchbar__input"
                placeholder=""
              />
              <button class="sidenav__searchbar__btn button"></button>
            </form>
            <h4 class="sidenav__ingredients"></h4>
            <ul class="sidenav__products-list">
              <li class="product">
                <div class="product__info">
                  <h5 class="product__info-name"></h5>
                  <h6 class="product__info-type"></h6>
                </div>
                <div class="product__action">X</div>
              </li>           
            </ul>
            <div class="sidenav__btns">
              <button class="sidenav__btn button">Wyczyść</button>
              <button class="sidenav__btn button">Filtruj</button>
            </div>
          </nav>
          <main class="search"></main>
        </div>
      </div>
      <div class="container-results"></div>
      <!-- <footer class="footer"></footer> -->
    </div>
  </body>

我指定了.container-search的高度如下：

.container-search {
  display: flex;
  flex-direction: column;
  height: 92vh;
  margin: 2rem;
  background-color: var(--color-primary-light-1);
}

然后我的.search-content看起来像这样：

.search-content {
  display: flex;
  flex-direction: row;
  flex: 1;
}

现在我的.sidenav__products-list height由属性flex定义：1，因为我想让它占用所有的空闲空间

.sidenav {
  flex: 0 0 30%;
  min-width: 30rem;
 
  display: flex;
  flex-direction: column;
}

sidenav__products-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
  }

现在，当我添加更多的<li class="product">时，没有显示溢出。你知道我哪里做错了吗？
我不想指定max-height属性，因为我想让我的.sidenav__products-list高度自动调整到屏幕高度，这就是我使用flex的原因：1关于这个类
更多信息请访问我的github -> https://github.com/szymonJag/CookLib/tree/main/CookLib/wwwroot

css

来源：https://stackoverflow.com/questions/76042345/overflow-scroll-doesnt-work-properly-with-flex-1

2条答案

按热度按时间

tzdcorbm1#

您需要将flex:1添加到.sidenav__products-list元素中，其余的添加到.sidenav元素中。试试这个：

.sidenav{
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  height:100vh;
  }
.sidenav__products-list{
  flex:1;
}

<nav class="sidenav">
  <h3 class="sidenav__text">Co masz w lodówce?
  </h3>
  <form action="#" class="sidenav__searchbar">
    <input
           type="text"
           class="sidenav__searchbar__input"
           placeholder="Give ingredients..."
           />
    <button class="sidenav__searchbar__btn button">Search</button>
  </form>
  <h4 class="sidenav__ingredients">Ingredients list:
  </h4>
  <ul class="sidenav__products-list">
    <li class="product">
      <div class="product__info">
        <h5 class="product__info-name">Onion</h5>
        <h6 class="product__info-type">Vegetables
        </h6>
      </div>
      <div class="product__action">X
      </div>
    </li>
    
  </ul>
  <div class="sidenav__btns">
    <button class="sidenav__btn button">Clear
    </button>
    <button class="sidenav__btn button">Filter
    </button>
  </div>
</nav>

赞(0）回复(0）举报 2023-05-08

w8f9ii692#

.sidenav{
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
      height: fit-content;
  }
.sidenav__products-list{
  position: relative;
}

<nav class="sidenav">
  <h3 class="sidenav__text">Co masz w lodówce?
  </h3>
  <form action="#" class="sidenav__searchbar">
    <input
           type="text"
           class="sidenav__searchbar__input"
           placeholder="Give ingredients..."
           />
    <button class="sidenav__searchbar__btn button">Search</button>
  </form>
  <h4 class="sidenav__ingredients">Ingredients list:
  </h4>
  <ul class="sidenav__products-list">
    <li class="product">
      <div class="product__info">
        <h5 class="product__info-name">Onion</h5>
        <h6 class="product__info-type">Vegetables
        </h6>
      </div>
      <div class="product__action">X
      </div>
    </li>
    
  </ul>
  <div class="sidenav__btns">
    <button class="sidenav__btn button">Clear
    </button>
    <button class="sidenav__btn button">Filter
    </button>
  </div>
</nav>

赞(0）回复(0）举报 2023-05-08

我来回答

css 溢出：滚动无法与flex一起正常工作：1

2条答案

相关问题

热门标签

最新问答