Question 239063 in Html Question posted in
Some basic documentation can be found here.

Html – How to get flexbox items to be aware of their contents?

I have a project that has divs that will contain unknown content, some maybe fixed size, some maybe inline-blocks, some may have width of 100%. I’m using flex-box on the container since I want the contents to be vertically aligned.

In the following example I have holder which is a flex box and differing numbers of .item columns, within these columns will be component of unknown size, in the first holder it has one item that contains something with width of 100%, I want this to take up 100% of the holder.

<div class="holder">
    <div class="item">
        <div class="full">Data</div>
    </div>
</div>

In this example I have 3 items, the first 2 should take up the space they require and the 3rd item should take up the remaining space since it’s width is 100%, is there anyway of doing this either with flexbox or some other method that will keep the contents vertically centrally aligned?

<div class="holder">
    <div class="item">
        <div>Data 1</div>
    </div>
    <div class="item">
        <div>Data 2</div>
    </div>
    <div class="item">
        <div class="full">Data 3</div>
    </div>
</div>

Here is the CSS I’m using, again if there is another way of doing this without flex I don’t mind.

.holder {
    width: 600px;
    border: 1px solid black;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    white-space: nowrap;
}
.holder .item {
    border: 1px solid red;
}
.holder .full {
    width: 100%;
}

.holder {
    width: 600px;
    border: 1px solid black;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    white-space: nowrap;
}
.holder .item {
    border: 1px solid red;
}
.holder .full {
    width: 100%;
}
<div class="holder">
    <div class="item">
        <div>Data 1</div>
    </div>
    <div class="item">
        <div>Data 2</div>
    </div>
    <div class="item">
        <div class="full">Data 3</div>
    </div>
</div>
Tags:

2

Answers


  1. 0

    Use the :has() selector:

    .holder {
  width: 600px;
  border: 1px solid black;
  display: flex;
  align-items: flex-end;
  white-space: nowrap;
}
.holder .item {
  border: 1px solid red;
}
.item:has(.full) {
  width: 100%;
}
    <div class="holder">
  <div class="item">
    <div>Data 1</div>
  </div>
  <div class="item">
    <div>Data 2</div>
  </div>
  <div class="item">
    <div class="full">Data 3</div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Since, it is a flex item simply use flex: 1 to take the remaining space.

    .holder .item:last-child{
    flex: 1;
}

    .holder {
    width: 600px;
    border: 1px solid black;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    white-space: nowrap;
}
.holder .item {
    border: 1px solid red;
}

.holder .item:last-child{
    flex: 1;
}

.holder .full {
    width: 100%;
}
    <div class="holder">
    <div class="item">
        <div>Data 1</div>
    </div>
    <div class="item">
        <div>Data 2</div>
    </div>
    <div class="item">
        <div class="full">Data 3</div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search