超过 DIV 高度的 ul li 元素

Question

我有一个固定高度的 div，它有 Ul、li 元素，所以如果 ul/li 元素的内容超过 div 高度，它应该与右侧而不是溢出 div 之外。我已经尝试了一切但无法实现，下面是我的代码：

div {
  max-height: 200px;
  background: red;
}

<div>
  <h3>ItemsA</h3>
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
  </ul>
  <h3>ItemsB</h3>
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
  </ul>
  <h3>ItemsC</h3>
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
  </ul>
</div>

Answer 1

如果你想放置一行 li 元素。你可以给 div display: flex 特征。如果lis的高度超过div的高度，可以使用overflow-y: auto。这会将滚动条置于父级 div

.parent {
  max-height: 200px;
  background: red;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

<div class="parent">
   <div>
    <h3>ItemsA</h3>
    <ul>
     <li>Item1</li>
     <li>Item2</li>
     <li>Item3</li>
     <li>Item4</li>
    </ul>
   </div>
   <div>
    <h3>ItemsB</h3>
    <ul>
     <li>Item1</li>
     <li>Item2</li>
     <li>Item3</li>
     <li>Item4</li>
    </ul>
   </div>
   <div>
    <h3>ItemsC</h3>
    <ul>
     <li>Item1</li>
     <li>Item2</li>
     <li>Item3</li>
     <li>Item4</li>
    </ul>
   </div>
   <div>
    <h3>ItemsD</h3>
    <ul>
     <li>Item1</li>
     <li>Item2</li>
     <li>Item3</li>
     <li>Item4</li>
    </ul>
   </div>
</div>

Answer 2

首先，我强烈建议将每个 <ul> 及其关联的 <h3> 包装到一个容器中，这样您就可以更好地控制布局。无论您使用何种布局，它都会直接影响 <ul> 和 <h3> 元素。通过将两个关联元素包装到单独的容器中，布局属性仅影响这些容器。

解决此问题的一种方法是使用 flex-wrap。通过应用 flex-direction: column，flex-flow 将尝试将元素放在单个列中，如果不能，它们将换行到一个新列中。

/* Simple reset */
* {
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  max-height: 200px;
  background: red;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

<div class="wrapper">
  <div class="container">
    <h3>ItemsA</h3>
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>
  </div>
  <div class="container">
    <h3>ItemsB</h3>
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>
  </div>
  <div class="container">
    <h3>ItemsC</h3>
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>
  </div>
    <div class="container">
    <h3>ItemsD</h3>
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>
  </div>
</div>

Answer 3

.item-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  overflow-y: scroll;
  background: red;
}

<div class="item-list">
  <div>
    <h3>ItemsA</h3>
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>
  </div>
  <div>
    <h3>ItemsB</h3>
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>
  </div>
  <div>
    <h3>ItemsC</h3>
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>
  </div>
 </div>

超过 DIV 高度的 ul li 元素

Ul li elements exceeding DIV height

html

javascript

css

css-selectors