abhilash reddy abhilash reddy - 3 months ago 7
CSS Question

How can i move a flex item in a container to the bottom?

Hello i have 2 flex items which is wrapped in a container. I want the div containing the button to be placed at the bottom of the parent div but in the demo the div is placed next to the sibling which makes the bottom place unused.



<div style="display:flex;flex-direction:row">
<div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
<div style="display:flex;flex-direction:column;border:1px solid green;width:150px" id="child1">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<div style="display:flex;flex-direction:row" id="child2">
<button>Add</button>
</div>
</div>
</div>





This is how i am creating the UI, i want the div which has id "child1" to take maximum height of the parent and should place the div with id "child2" at the bottom of parent div.Somebody help me in doing this

Answer

It depends what exact position you want to achieve if you just want to place the box at bottom with the current height only use this

<div style="display:flex;flex-direction:row">
      <div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
      </div>
      <div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
        <div  style="display:flex;flex-direction:column;border:1px solid green;width:150px;flex-direction:column; margin:0; margin-top:auto" id="child1">
          <div>1</div>
          <div>1</div>
          <div>1</div>
          <div>1</div>
          <div>1</div>
        </div>
        <div style="display:flex;flex-direction:row" id="child2">
          <button>Add</button>
        </div>
      </div>
    </div>

This another example increase the height to 100% of the parent div and bottom space will not be there.

<div style="display:flex;flex-direction:row">
      <div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
      </div>
      <div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
        <div  style="display:flex;flex-direction:column;border:1px solid green;width:150px;flex:1" id="child1">
          <div>1</div>
          <div>1</div>
          <div>1</div>
          <div>1</div>
          <div>1</div>
        </div>
        <div style="display:flex;flex-direction:row" id="child2">
          <button>Add</button>
        </div>
      </div>
    </div>

Comments