如何获得拆分层的内容容器最大宽度以匹配全宽层的宽度？

Question

I am attempting to build out a 60/40 split tier on a web page whose container size is calculated based on the maximum container width of the full sized tier above it. I was able to pull the max-width value of the container class of the full-width-tier and then use some Javascript to manipulate that number to compute two values (one for the left side of the split tier and one for the right) and then use jQuery to apply the new calculated max-width values to their respective sides of the tier. The value on the left is 60% of the container max-width and the value on the left is 40% of the container max-width.

Here is my code:

HTML/JS/jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="tier-one" class="full-width-tier">
   <div class="main-text container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien metus, tristique et massa   at, finibus fringilla mi. Vestibulum in semper eros. Nullam in ligula eros. Vivamus arcu risus, convallis sit amet diam eget, consequat hendrerit elit. Donec ac metus id arcu rhoncus sodales. Donec in justo sed mauris iaculis auctor sit amet ut neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec accumsan interdum elit, vitae euismod odio mollis vitae. Suspendisse arcu mi, rhoncus non tortor et, mattis efficitur ligula. Sed hendrerit nunc et condimentum fermentum. Nunc vel est non mauris sagittis dignissim. Duis placerat vehicula enim, a tincidunt dui rhoncus sit amet. Aenean sed semper leo. Suspendisse placerat dictum arcu vehicula dapibus. Vivamus et sem venenatis, placerat dolor ut, imperdiet dui. Vivamus sed tortor a massa fringilla tristique. Quisque vulputate ac risus eget tincidunt. Nullam a viverra ex.</p>
   </div>
</div>

<div id="tier-two" class="flex-tier">
    <div class="flex-col-1">
    <div class="main-text container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec pulvinar turpis. Donec nec enim ultricies, ultrices libero ac, tincidunt nibh. In varius neque eu orci consequat, id vestibulum ex congue. Aliquam nulla sem, fermentum eget efficitur nec, gravida at risus. Phasellus molestie sit amet mauris interdum dapibus. Duis vehicula nulla sit amet dignissim tincidunt. Fusce pulvinar, magna sollicitudin sollicitudin pharetra, augue urna varius ex, a ullamcorper elit ante vehicula urna. Pellentesque aliquet posuere neque sed sodales. Nulla auctor magna eget nisi pulvinar sagittis. In a massa at tortor faucibus accumsan at eget nisl. Aliquam accumsan convallis ex et viverra. Pellentesque tempor turpis mi, sit amet tincidunt eros mattis et. Nullam sed ex non risus pulvinar euismod ut quis turpis. Proin ut vestibulum nunc.<p>
    </div>  
  </div>

<!-- Left tier container max-width calculator  -->
<script>
var flex_elem = document.querySelector('.container');
var flex_container_styles = getComputedStyle(flex_elem);
var flex_container_width = flex_container_styles.maxWidth;
var container_width_integer = parseInt(flex_container_width, 10);

var final_flex_60_width = container_width_integer * 0.6;
var final_flex_60_width_px = final_flex_60_width.toString() + "px";
</script>

<script>
function addSplitMaxWidth(media_query) {
  if (media_query.matches)
    $("#tier-two .flex-col-1 .container").css("cssText", "max-width: " + final_flex_60_width_px + " !important;");
}
var media_query = window.matchMedia("(min-width: 768px)")
addSplitMaxWidth(media_query) // Call listener function at run time
media_query.addListener(addSplitMaxWidth) // Attach listener function on state changes
</script>
<!-- End caculator -->

  <div class="flex-col-2">
    <div class="main-text container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec pulvinar turpis. Donec nec enim ultricies, ultrices libero ac, tincidunt nibh. In varius neque eu orci consequat, id vestibulum ex congue. Aliquam nulla sem, fermentum eget efficitur nec, gravida at risus. Phasellus molestie sit amet mauris interdum dapibus. Duis vehicula nulla sit amet dignissim tincidunt. Fusce pulvinar, magna sollicitudin sollicitudin pharetra, augue urna varius ex, a ullamcorper elit ante vehicula urna. Pellentesque aliquet posuere neque sed sodales. Nulla auctor magna eget nisi pulvinar sagittis. In a massa at tortor faucibus accumsan at eget nisl. Aliquam accumsan convallis ex et viverra. Pellentesque tempor turpis mi, sit amet tincidunt eros mattis et. Nullam sed ex non risus pulvinar euismod ut quis turpis. Proin ut vestibulum nunc.</p>
    </div>
  </div>

<!-- Right container max-width calculator  -->
<script>
var flex_elem = document.querySelector('.container');
var flex_container_styles = getComputedStyle(flex_elem);
var flex_container_width = flex_container_styles.maxWidth;
var container_width_integer = parseInt(flex_container_width, 10);

var final_flex_40_width = container_width_integer * 0.4;
var final_flex_40_width_px = final_flex_40_width.toString() + "px";
</script>

<script>
function addSplitMaxWidth(media_query) {
  if (media_query.matches)
    $("#tier-two .flex-col-2 .container").css("cssText", "max-width: " + final_flex_40_width_px + " !important;");
}
var media_query = window.matchMedia("(min-width: 768px)")
addSplitMaxWidth(media_query) // Call listener function at run time
media_query.addListener(addSplitMaxWidth) // Attach listener function on state changes
</script>
<!-- End caculator -->

</div>

CSS

body {
    box-sizing: border-box;
}

.full-width-tier {
    position: relative;
    width: 100%;
}

.container {
  max-width: 1170px;
  margin: 0 auto;
}

.main-text {
  padding: 20px;
}

.flex-tier {
    position: relative;
    width: 100%;
        display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-tier [class*="flex-col-"] {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.flex-tier .main-text {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    height: 100%;
}

@media (max-width: 768px) {
  .flex-tier {
        display: block !important;
    }
  .flex-tier [class*="flex-col-"] {
      max-width: 100% !important;
      width: 100% !important;
    }
}

.flex-col-1 .main-text {
  float: right;
}

.flex-col-2 .main-text {
  float: left;
}

#tier-two .flex-col-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%;
}

#tier-two .flex-col-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
}

Apologies for placing the Javascript and Jquery inside the HTML but the order in which these scripts load in relation to the HTML is very important.

Now, while my calculated values appear to be correct, when viewing the page at larger screen sizes, the containers of the two tiers don't appear to line up. Here is a screenshot:

alignment-error-screenshot

This is my problem. No matter what I adjust, nothing appears to fix this problem. I could set the widths manually or change the percentage of the container max-width value I use on each side to line up perfectly but when I do that, the solution only works for the max-width currently in use (in this case 1170px). If the max-width were increased to say 1500px, the manually set values don't line up anymore. This needs to work regardless of the initially set max-width value for the container class.

Here is a jsfiddle with my code put into place. Here is a preview of the page as well.

Sorry this is a lot but hopefully I've made my dilemma clear. Thanks in advance for any and all help!

Answer 1

Kind of a long question so I apologize if my answer isn't exactly what you're looking for, but CSS grid is a great way to make 2 columns with one always taking up 40% of the space and the other 60%. Something like this would work:

.container {
display: grid;
grid-template-columns: 40% 60%; /*you could also just do 40% auto */
grid-template-rows: 100%;
}

.smallColumn {
grid-column: 1 / 2;
}

.largeColumn {
grid-column: 2 / 3;
}

If you aren't super familiar with how CSS grid works, I'd highly recommend learning it since it's so useful/powerful. Here's a good resource.

Let me know if you need further clarification or have other problems. Good luck!