How to use CSS Flex to achieve the same height border of left and right layout?

Tips for implementing the left and right columns contour borders under CSS Flex layout

When using CSS Flex layout, you often need to divide the page into two parts, and the lower part is then subdivided into two columns. If the heights of the left and right columns are not fixed, how can we ensure that the borders that divide them can automatically extend to the highest height? This article provides two solutions to solve this problem.

Scene: The page is divided into two parts, the upper and lower parts, and the lower part adopts a Flex layout. The height of the left and right columns is uncertain, so a border of equal height is needed between the two columns.

Solution 1: jQuery adjustment based on existing structure

If the HTML structure cannot be modified, this method can be used. First, set height: min-content; for the right element (assuming it is .rht ) so that its height is adaptable to the content. Then, use jQuery to get the height of .rht and apply it to the child elements of the left element (assuming it is .lft ):

 let h = $(".rht").height() 'px';
$(".lft div").css({ height: h });

This method relies on JavaScript and needs to be executed after the page is loaded.

Solution 2: Adjust HTML structure and CSS style

This method is simpler and more efficient, without JavaScript. Contour borders can be implemented more elegantly by adjusting HTML structure and CSS styles.

Improved HTML structure:

<div class="wrapper">
  <div class="top">Top content</div> <!-- Top area-->
  <div class="content"> <!-- Flex layout container-->
    <div class="lft">
      <div>Content on the left</div>
    </div>
    <div class="rht">
      <div>Content on the right</div>
    </div>
  </div>
</div>

Corresponding CSS style:

 * {
  padding: 0;
  border: 0;
  margin: 0;
  box-sizing: border-box; /* It is recommended to add to avoid borders affecting element size calculation*/
}

.wrapper {
  height: 100vh; /* Occupies the entire viewport height*/
  display: flex;
  flex-direction: column; /* Vertical layout*/
}

.top {
  height: 100px;
  background: #e3e3e3;
}

.content {
  display: flex;
  flex: 1; /* occupy the remaining space*/
  min-height: 0; /* Prevent minimum height from affecting the layout*/
}

.lft {
  flex: 1; /* occupy the remaining space*/
}

.rht {
  width: 600px;
  border-left: 1px solid red;
  min-height: 0; /* Prevent minimum height from affecting the layout*/
}

In this plan:

• .wrapper uses flex-direction: column; to achieve vertical layout.
• .content uses flex: 1; to occupy the remaining space to ensure its height is adaptable.
• Both .lft and .rht use min-height: 0; to prevent the minimum height from limiting its height.
• The split line is border-left directly on .rht .

Solution 2 is implemented through pure CSS, which has better performance and is easier to maintain. It is recommended to give priority to the use of Plan 2.

The above is the detailed content of How to use CSS Flex to achieve the same height border of left and right layout?. For more information, please follow other related articles on the PHP Chinese website!