Сделать контейнер расширяться при создании новых столбцов

У меня действительно большая проблема с гибкими коробками, и я не могу найти на это ответа. Ниже я помещу код. Проблема в том, что черный фон не расширяется вправо вместе с содержимым. Вы знаете, как это исправить? Как заставить контейнер расширяться в зависимости от количества столбцов содержимого?

Цель состоит в том, чтобы достичь чего-то вроде этого: https://imgur.com/a/4ETPJS6

.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>

Как вы хотите, чтобы это выглядело? Я не понимаю, что вы имеете в виду, читая свой вопрос.

— 30.05.2018 21:15

Я имею в виду, что у второго столбца Aaa нет фона. У меня много названий категорий, и я хочу поставить их рядом. Но .categories> ul width находится только в первом столбце

— 30.05.2018 21:19

css flexbox

30.05.2018 21:13

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Удалить стиль position: absolute;

.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;
			}

<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>

но список теперь имеет 100% ширину. Я хочу, чтобы его ширина была равна количеству столбцов

— 30.05.2018 21:28

Я боюсь, что это работает именно так, и не уверен, что этого можно добиться без значительного изменения ваших стилей. Загляну в него утром, если до тех пор не найдешь ответов.

— 30.05.2018 21:31

30.05.2018 21:26

Похоже, ваш результат может быть получен, если вы просто измените селекторы для своего 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>

Но все еще остается много белого пространства. Я хочу, чтобы это выглядело вот так. imgur.com/a/4ETPJS6

— 30.05.2018 21:32

30.05.2018 21:27

Ответ принят как подходящий

Это то, что вы ищете?

Примечание: вам нужно вырастить вашего последнего ребенка в столбце, чтобы черный фон был на всю высоту.

.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>

Ах, да! Это идеально! большое спасибо! : D

— 30.05.2018 23:01

30.05.2018 22:31