CODEWITHSUNDEEP
htmlcss
Suule
Suule

Reputation: 2468

Inner div with 100% is spilling out of outer div

When setting up below css, I got the cellContentResult out of the container div. So lets say my whole div is 820px, so the whole row should have this size. But unfortunatelly the cellContentResult has 820px as well, even when rest of the div's taking lets say 200px, so the whole site has 1020px.

.list {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.row {
  transition: all .2s ease-out;
  overflow: hidden;
  display: flex;
  height: 3.8em;
  width: 100%;
}

.defaultCellContent {
  display: inline-block;
  padding: 0 5px 0 5px;
  vertical-align: middle;
}

.cellContentDate {
  width: 8.5em;
}

.cellContentName {
  text-align: center;
  width: 5em;
}

.cellContentResult {
  width: 100%;
}
<div class="list">
  <div class="row">
    <div class="cellContentIcon defaultCellContent"></div>
    <div class="cellContentDate defaultCellContent">
      <div>2019-01-28 06:45:33</div>
      <div>2019-01-28 06:45:43</div>
    </div>
    <div class="cellContentName defaultCellContent">
      <div class="name">task1</div>
    </div>
    <div class="cellContentResult defaultCellContent">
      <div class="result">Finished</div>
      <div class="message">Message TESTTESTEST</div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 399

Answers (4)

Suule
Suule

Reputation: 2468

With the hint from @FrankFajardo I was able to achieve it with something like this:

.cellContentResult {
  width: calc(100% - 18em);
}

Upvotes: 0

jpfetest
jpfetest

Reputation: 71

as you display as 'table' the list, I'd display as 'table-row' the '.row' and display 'table-cell' the '.defaultCellContent'. Like this:

<style>
.list {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.row {
    transition: all .2s ease-out;
    overflow: hidden;
    display: table-row;
    height: 3.8em;
    width: 100%;
}

.defaultCellContent {
    display: table-cell;
    padding: 0 5px;
    vertical-align: middle;
    border: 1px solid silver;
}

.defaultCellContent div {
    padding: 2px 0;
}

.cellContentDate {
    width: 8.5em;
}

.cellContentName {
    text-align: center;
    width: 5em;
}

.cellContentResult {
    width: 100%;
}
</style>

Upvotes: 1

Alejalapeno
Alejalapeno

Reputation: 1008

Since you're already using flex on the row you can use flex: 1 on .cellContentResult since it is the only non-fixed width cell. This will allow it to grow or shrink to occupy the remaining available space.

.list{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.row {
    transition: all .2s ease-out;
    overflow: hidden;
    display: flex;
    height: 3.8em;
    width: 100%;
}

.defaultCellContent {
    display: inline-block;
    padding: 0 5px 0 5px;
    vertical-align: middle;
    border: 1px solid red;
}

.cellContentDate {
    width: 8.5em;
}

.cellContentName {
    text-align: center;
    width: 5em;
}

.cellContentResult {
    flex: 1;
}
<div class="list">
    <div class="row">
        <div class="cellContentIcon defaultCellContent"></div> 
        <div class="cellContentDate defaultCellContent">
            <div>2019-01-28 06:45:33</div> 
            <div>2019-01-28 06:45:43</div> 
        </div> 
        <div class="cellContentName defaultCellContent"> 
            <div class="name">task1</div> 
        </div> 
        <div class="cellContentResult defaultCellContent"> 
            <div class="result">Finished</div> 
            <div class="message">Message TESTTESTEST</div> 
        </div>
    </div>
</div>

Upvotes: 1

aashu
aashu

Reputation: 1

"You have to set your row class height auto; then you will get the exact what you want."

.row {
transition: all .2s ease-out;
overflow: hidden;
display: flex;
height: auto;
width: 100%;

}

Upvotes: -1

Related Questions