0

I have two divisions in one element of a flexbox row. I want the second one to align to the bottom. I was able to get it to work with height: 100% as shown in this post. However, it doesn't work in Safari and isn't recommend as discussed in this post.

I'm now trying the method shown here. The goal is to get the green div to align to the bottom. As shown by the black border, the enclosing div has space at the bottom. I tried margin-top: auto. It has no effect. Using margin-top with a pixel value does move it down, but would fail as the viewport width was changed and the div above it change height.

In the target application, the mf6 class is conditionally applied as function of the viewport width. On phone sized viewports, the row elements are defined as 100%. In the final solution, the green div will contain multiple elements.

.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
  }

.mf6 {flex: 0 0 50%;}

.theme-split-1 { background-color: #a7ef76; color: black }
<div class="flex-row">
  <div class="mf6" style="border-bottom: 6px solid black;">
      <div class="mf6">
        <p>Our students set the bar</p>
      </div>

      <div class="theme-split-1" style="border-bottom: 6px solid red;">
          <p>Programs such as </p>
      </div>

  </div>

  <div class="mf6" style="">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>

  </div>

</div>
curt
  • 4,422
  • 3
  • 42
  • 61

2 Answers2

3

Use a flex layout in the left-hand column with flex-direction: column. By using justify-content: space-between, then second item will be sent to the bottom.

.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
  }

.flex-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mf6 {flex: 0 0 50%;}

.theme-split-1 { background-color: #a7ef76; color: black }
<div class="flex-row">
  <div class="flex-col mf6" style="border-bottom: 6px solid black;">
      <div class="mf6">
        <p>Our students set the bar</p>
      </div>

      <div class="theme-split-1" style="border-bottom: 6px solid red;">
          <p>Programs such as </p>
      </div>

  </div>

  <div class="mf6" style="">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>

  </div>

</div>
Noleli
  • 451
  • 3
  • 5
1

If I am correct you want the div with the green background to be placed at the bottom of the border-box of the section that has the black border. If I am incorrect let me know and I can edit or remove this answer.

You can add display: flex, flex-direction: column and justify-content: space-between to the element selector .mf6. Justify-content will work vertically as the main axis for that element has changed due to its flex-direction changing.

More on Flex Main Axis

.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.mf6 {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.theme-split-1 {
  background-color: #a7ef76;
  color: black;
}
<div class="flex-row">
  <div class="mf6" style="border-bottom: 6px solid black;">
    <div class="mf6">
      <p>Our students set the bar</p>
    </div>

    <div class="theme-split-1" style="border-bottom: 6px solid red;">
      <p>Programs such as </p>
    </div>

  </div>

  <div class="mf6" style="">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>

  </div>

</div>
dale landry
  • 7,831
  • 2
  • 16
  • 28