Solution to the ineffectiveness of flex layout width in css3

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

Recommend

Talk about the 8 user instincts behind user experience in design

Editor's note: This article is contributed by...

Detailed tutorial on installing different (two) versions of MySQL database on Windows

1. Cause: I need to import a sql file, but I can&...

JavaScript function detailed introduction

Any number of statements can be encapsulated thro...

Node.js+express message board function implementation example

Table of contents Message Board Required librarie...

Sample code for implementing a background gradient button using div+css3

As the demand for front-end pages continues to in...

Share some uncommon but useful JS techniques

Preface Programming languages ​​usually contain v...

Sharing an idea of ​​building a master-slave system for a large MySQL database

This week has been as busy as a war. I feel like ...

A brief discussion on VUE uni-app custom components

1. Parent components can pass data to child compo...

Summary of MySQL logical backup and recovery testing

Table of contents 1. What kind of backup is a dat...

Use CSS variables to achieve cool and amazing floating effects

Recently, I found a fun hover animation from the ...

Small program to implement a simple calculator

This article example shares the specific code of ...

How to insert Emoji expressions into MySQL

Preface Today, when I was designing a feedback fo...

How to quickly install and deploy MySQL in Windows system (green free installation version)

First, download the green free installation versi...

Detailed explanation of zabbix executing scripts or instructions on remote hosts

Scenario Requirements 1. We can use the script fu...

React method of displaying data in pages

Table of contents Parent component listBox List c...