CODEWITHSUNDEEP
htmlcssflexbox
Ricardo
Ricardo

Reputation: 379

CSS flexbox wrap effect on table row

I currently have a list of items where each item is composed of:

I want to force the box with actions at the right to wrap whenever it collides with the text on the left. The problem is, that different items have different names and sizes. How can I force the left side to have the same size just like tables?

I need to fit as much text as possible, so it would be nice to find a way that, from the moment one row is forced to wrap, the rest do the same.

Here is a small sketch of what I want to achieve:

enter image description here

And here is an example put together of what I'm doing at the moment, which although wraps, not at the same time:

.Box {
  padding: 1rem
}

.Row {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
}

.Fill {
  flex: 1 1 auto;
}
<div class="Box">
  <div class="Row">
    <div class="Fill">
      <span>Some text not too big</span>
    </div>
    <div>
      <span>Same width</span>
    </div>
  </div>
  <div class="Row">
    <div class="Fill">
      <span>Some text that will be absolutely big for real</span>
    </div>
    <div>
      <span>Same width</span>
    </div>
  </div>
</div>

Upvotes: 2

Views: 788

Answers (1)

HamiD
HamiD

Reputation: 1090

Try this:

.con{
  display:flex;
  flex-wrap:wrap;
  
}
.left{
  background-color:red;
  flex:1 1 auto;
}
.right{
  background-color:blue;
  width:300px;
}
<div class="con">
  <div class="left">lskjf aölkfj aölfkj sdöflkja faölkfj aölkfj aöslkf jasölfkj saöflkas fölkas fösadkfh salökh fsllfkj sdöflkja faölkfj aölkfj aöslkf jasölfkj saöflkas fölkas fösadkfh salökh fsllfkj sdöflkja faölkfj aölkfj aöslkf jasölfkj saöf saöflkas fölkas fösadkfh salökh f</div>
  <div class="right">003</div>  
<div class="left">lskjf aölkfj aölfkj sdöflkja faölkfj aölkfj aöslkf jasölfkj saöflkas fölkas fösadkfh salökh fsllfkj sdöflkja faölkfj aölkfj aöslkf jasölfkj saöflkas fölkas fösadkfh salökh fsllfkj sdöflkja faölkfj aölkfj aöslkf jasölfkj saöf saöflkas fölkas fösadkfh salökh f</div>
      <div class="right">004</div>
    </div>

You should add flex-wrap:wrap to the container and add a fix width to the right/actions divs.

Upvotes: 1

Related Questions