CODEWITHSUNDEEP
htmlcssflexbox
Maxim Kolosovskii
Maxim Kolosovskii

Reputation: 21

Make parent container take flex items width

I have a list container with limited height. It has list of some child items. These items should be placed from top to bottom and from left to right. If there are more and more elements, they'll be placed in a new column on the right.

enter image description here

How can I make the parent container take the width from the content? So that the parent container doesn't expand to the full width of the window and hide the next columns?

What I tried: I tried to set different display of the parents, but the children from the second column get hidden, and the entire width of the .parent_item = the width of the first column only.

Example:

.parent {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: auto;
  padding: 2px;
  height: 100%;
  max-height: 150px;
  max-width: 80vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.parent_item {
  display: flex;
  flex-flow: column wrap;
  gap: 2px;
  max-width: max-content;
  overflow: auto;
}

.parent_item div {
  background-color: #f2f2f2;
  height: 30px;
  min-width: 30px;
}
<div class="parent">
  <div class="parent_item">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
  </div>
  <div class="parent_item">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>

Upvotes: 2

Views: 977

Answers (1)

fuziion_dev
fuziion_dev

Reputation: 1701

By using display contents you can make display flex ignore its children and make it flex the grand children, check the snippet for the result.

.parent {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: auto;
  padding: 2px;
  height: 100%;
  max-height: 150px;
  max-width: 80vw;
  gap: 3px;
  display: flex;
  flex-flow: column wrap;
  overflow: auto;
}

.grand-child {
  background-color: #f2f2f2;
  height: 30px;
  min-width: 30px;
}

.child {
  display: contents;
}
<div class="parent">
  <div class="child">
    <div class="grand-child">1</div>
    <div class="grand-child">2</div>
    <div class="grand-child">3</div>
    <div class="grand-child">4</div>
    <div class="grand-child">5</div>
    <div class="grand-child">6</div>
    <div class="grand-child">7</div>
    <div class="grand-child">8</div>
    <div class="grand-child">9</div>
    <div class="grand-child">10</div>
    <div class="grand-child">11</div>
  </div>
  <div class="child">
    <div class="grand-child">1</div>
    <div class="grand-child">2</div>
    <div class="grand-child">3</div>
    <div class="grand-child">4</div>
    <div class="grand-child">5</div>
    <div class="grand-child">6</div>
  </div>
</div>

To make the row cells start in a new row for another child use the following CSS styling;

.parent {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: auto;
  height: 100%;
  max-height: 150px;
  max-width: 80vw;
  display: flex;
}

.child {
  margin: 2px;
  flex: 1;
  gap: 3px;
  display: flex;
  flex-flow: column wrap;
  overflow: auto;
}

.grand-child {
  background-color: #f2f2f2;
  height: 30px;
  min-width: 30px;
}
<div class="parent">
  <div class="child">
    <div class="grand-child">1</div>
    <div class="grand-child">2</div>
    <div class="grand-child">3</div>
    <div class="grand-child">4</div>
    <div class="grand-child">5</div>
    <div class="grand-child">6</div>
    <div class="grand-child">7</div>
    <div class="grand-child">8</div>
    <div class="grand-child">9</div>
    <div class="grand-child">10</div>
    <div class="grand-child">11</div>
  </div>
  <div class="child">
    <div class="grand-child">1</div>
    <div class="grand-child">2</div>
    <div class="grand-child">3</div>
    <div class="grand-child">4</div>
    <div class="grand-child">5</div>
    <div class="grand-child">6</div>
  </div>
</div>

I hope this solved your issue, if it didn't let me know, and I will look into it some more.

Upvotes: 1

Related Questions