0

I was having problems getting a div justified to the bottom of a wrapping div so I created a code penexample to test it. I got it to work by setting the height to 100%. When I copied the test code into my web site, it stopped working. I then tried using Chrome and Firefox. It worked fine. It only fails in Safari. Any idea what might be breaking it? When it doesn't work, the green div is up against the one above it.

My goal is to have the green div flush with the bottom as shown in the test. Any other way to do it is fine with me. I did try a number of different things before this solution.

.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
.flex-col {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%
}
.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="flex-col" style="border-bottom: 6px solid blue">
      <div class="mf6">
        <p>Our students set the bar</p>
      </div>

      <div class="mf6 theme-split-1" style="align-self: stretch">
        <p>Programs such as </p>
      </div>
    </div>
  </div>

  <div class="mf6">
    <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

1 Answers1

0

For the first part of your question, making sure the green div aligns where you want, the answer is to make sure your CSS is working the way in production that you think it is.

Here's how to do that:

If something contextual is overriding your CSS or if there is another CSS source loading after yours, you can find out what is ruining it by inspecting the element using devtools in your browser.

It will show the hierarchy of applied CSS and you will be able to see and test what is overriding your CSS example, and find the source.

Check your interposed DIV (class MF6) between your flex-row and flex-col, you may need to put the flex-col as a direct descendent of the flex-row.

Also, some side notes that may be helpful as well:

  • You have some inline CSS which may be better served with classes as well, depending on your exact situation
  • Check out flex-end

For your second issue (not working on Safari), the answer is to make sure you have all the -webkit prefixes needed:

  • You may need a -webkit prefix somewhere in there if you are getting results elsewhere but not in safari.

  • You used to need display: -webkit-flex; to augment your display: flex;, not sure if still the case.

ed2
  • 1,457
  • 1
  • 9
  • 26
  • I tried it both in Safari and Chrome and can't see any override. I clicked on the html line in the inspector with the class flex-col. – curt Aug 08 '21 at 23:03
  • I can see 6 different DIVs to check. – ed2 Aug 08 '21 at 23:39
  • I was looking at the wrong section. However, the problem turns out to only happen in Safari. It's just fine in Chrome and Firefox. I'm going to change my question to reflect that. – curt Aug 09 '21 at 00:08
  • Glad you found the applicable section. See edit commending on Safari compatibility. – ed2 Aug 09 '21 at 00:21
  • Is this an answer that solves the problem? Or a debugging suggestion? – Rob Aug 09 '21 at 10:28
  • It's an answer, accompanied by some side notes to help further. Edited to clarify. Thanks. – ed2 Aug 09 '21 at 12:49