Question

我对弹性盒子有很大的问题，但找不到任何答案。下面我会提供一些代码。问题是黑色背景不会随内容扩展到右侧。你知道如何解决这个问题吗？如何根据内容列数强制容器扩展？

.categories li ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: absolute;
  width: auto;
  padding-left: 0;
  background-color: black;
  color: red;
  max-height: 200px;
}

.categories li ul li {
  margin-right: 20px;
}

<ul class="categories">
  <li>
    <a href="#">Categories</a>
    <ul>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
      <li>Aaa</li>
    </ul>
  </li>
</ul>

Answer 1

删除position: absolute;样式

＆＃13;

.categories li ul {
				list-style: none;
			
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				width: auto;
				padding-left: 0;
				
				background-color: black;
				color: red;
				max-height: 200px;
			}
			
.categories li ul li { 
				margin-right: 20px;
			}

＆＃13;

<html>
<body>
  <ul class="categories">
			<li>
				<a href="#">AAAAAAAAAA</a>
				<ul>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
				</ul>
			</li>
		</ul>
</body>
</html>

＆＃13;

Answer 2

如果您只是更改CSS的选择器

，似乎可以完成您的结果

.categories li ul {
				list-style: none;
			
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				
				position: absolute;
				width: auto;
				padding-left: 0;
				
				max-height: 200px;
			}
			
.categories li ul li { 
				margin-right: 20px;
			}

.categories ul > li {
				background-color: black;
				color: red;
}

<html>
<body>
  <ul class="categories">
			<li>
				<a href="#">AAAAAAAAAA</a>
				<ul>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
					<li>Aaa</li>
				</ul>
			</li>
		</ul>
</body>
</html>

Answer 3

这是你要找的东西吗？

注意：您需要在列中培养您的最后一个孩子，以使黑色背景达到整个高度。

.categories {
  display: flex;
}

.categories > li {
  display: flex;
  flex-direction: column;
}

.categories li ul {
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding-left: 0;
  color: red;
  max-height: 200px;
  min-height: 200px;
  list-style: none;
  background-color: black;
}

.categories li ul li {
  margin-right: 20px;
  background-color: black;
}

.categories li ul li:last-child {
  flex:1;
}

<body>
  <ul class="categories">
    <li>
      <a href="#">Categories</a>
      <ul>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
        <li>Aaa</li>
      </ul>
    </li>
  </ul>
</body>

创建新列时使容器展开

3 个答案: