Question 289890 in CSS Question posted in
Some basic documentation can be found here.

Css Flex Direction Column align items space between

I am using inline css to generate dompdf. With dompdf absolute does not work.

I want col2 to show bottom of td. I tried rowspan I faced another issue get_cellmap null

I cannot use fixed height in px to div(flex) the div.green is variable.

col2 is a single power by that should be align at the bottom of td

How i can grow div.col2 column enter remaining td space?

This looks duplicate to Fill remaining vertical space with CSS using display:flex

But here I am not filling the screen space Instead I need to stretch inside a table row.

<table style="width:100%">
<tr>
  <td style="width:70%">
    <div style="height:300px;background-color:green;">
    
    </div>
  </td>
  <td>
  <div style="display:flex:flex-direction:column;align-items:stretch">
  
  
  <div class="col1">
    Top col
    </div>
    <div class="col2">
     power by
    </div>
    </div>
  </td>
</tr>
</table>

Jsfiddle

Tags:

2

Answers


  1. 0

    i’m not sure if this is what you meant but here’s a fix to show green col and top col aside of each other while the col2 is at the bottom:

          <table style="width:100%">
    <tr  style="display:flex;flex-direction:column;align-items:stretch">
      <td style="width:70%">
         <div  style="display:flex;flex-direction:row;align-items:stretch">
        <div style="height:300px;background-color:green;width:80%">
        </div>
     <div class="col1">
        Top col
        </div></div>
      </td>
      <td>
      <div>
        <div style="" class="col2">
         power by
        </div>
        </div>
      </td>
    </tr>
    </table>

    if that wasn’t your intention please explain more.

    Login or Signup to reply.
  2. 0

    I think this is what you are requiring. Just add height: 100% to the right side containing div and then flex your child elements as required.

    .right {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.col1 {
  flex: 1;
  background-color: pink;
}

.col2 {
  background: lightblue;
}
    <table style="width:100%">
  <tr>
    <td style="width:70%">
      <div style="height:170px;background-color:green;">

      </div>
    </td>
    <td style="height:170px;">
      <div class="right">
        <div class="col1">
          Top col
        </div>
        <div class="col2">
          power by
        </div>
      </div>
    </td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search