Solution to the ineffectiveness of flex layout width in css3

Two-column layout is often used in projects. There are many ways to achieve this effect.

insert image description here

But the most convenient one is flex. Set display:flex for the outer parent element; and then set the width of the child element to adapt.
flex-grow:1;, and another one setting a fixed width can achieve this, one is fixed and the other is adaptive.

The specific code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex width does not take effect</title>
</head>
<body>
  <style>
    /* Reset style */
    * {
      margin: 0px;
      padding: 0px;
    }
    /* Set the outer layer display to flex */
    .box {
      display: flex;
      height: 100px;
      width: 100%;
    }
    /* Left side adaptive*/
    .box .left {
      flex-grow: 1;
      background: red;
    }
    /* Fixed right side */
    .box .right {
      width: 200px;
      background: yellow;
    }
  </style>
  <!-- Outer box -->
  <div class="box">
    <!-- Left -->
    <div class="left"></div>
    <!-- Right side -->
    <div class="right"></div>
  </div>
</body>
</html>

The result of running this code is as shown in the screenshot above, but this code has a small bug. That is, if there is content on the left side (the adaptive side) and the width of the content exceeds the width of the left, the right side (fixed width) will be squeezed smaller, and you will find that the fixed width you gave (200px in the example) is not effective, or a scroll bar appears.
We add a little content on the left and make it exceed the width.

   /* Exceeding content style */
    .box .left .content {
      width: 1000px;
    }

  <!-- Left -->
    <div class="left">
      <!-- Exceeding content -->
      <div class="content"></div>
    </div>

Running results:

insert image description here

The content exceeds the limit and a scroll bar appears. This problem is easy to solve. Just add the overflow hidden attribute to the left.

  /* Left side adaptive*/
    .box .left {
      flex-grow: 1;
      background: red;
      overflow: hidden;
    }

insert image description here

But the problem arises again. It appears on the right, but its width becomes smaller and is less than 200.
This problem is actually very easy. Just add min-width:200px; to the div on the right and it will be perfect.

/* Fixed right side */
    .box .right {
      width: 200px;
      min-width: 200px;
      background: yellow;
    }

insert image description here

This way, no matter what screen you use or how you drag and drop, it will be perfectly compatible. . .

This is the end of this article about how to solve the problem of flex layout width not taking effect in css3. For more information about flex layout width not taking effect, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Differences between Windows Server 2008R2, 2012, 2016, and 2019

>>: Summary of the differences and usage of plugins and components in Vue