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

Implementation of sharing data between Docker Volume containers

What is volume? Volume means capacity in English,...

Teach you to create custom hooks in react

1. What are custom hooks Logic reuse Simply put, ...

Detailed explanation of the transition attribute of simple CSS animation

1. Understanding of transition attributes 1. The ...

【HTML element】Detailed explanation of tag text

1. Use basic text elements to mark up content Fir...

How to regularly clean up docker private server images

Using CI to build docker images for release has g...

HTML Code Writing Guide

Common Convention Tags Self-closing tags, no need...

Calling the search engine in the page takes Baidu as an example

Today, it suddenly occurred to me that it would be...

base target="" controls the link's target open frame

<base target=_blank> changes the target fram...

This article will help you understand the life cycle in Vue

Table of contents 1. beforeCreate & created 2...

Weird and interesting Docker commands you may not know

Intro Introduces and collects some simple and pra...

Steps for importing tens of millions of data into MySQL using .Net Core

Table of contents Preliminary preparation Impleme...

Vue-router does not allow navigation to the current location (/path) Error reasons and fixes

Table of contents Error message Cause Error demon...

ReactRouter implementation

ReactRouter implementation ReactRouter is the cor...

Detailed explanation of various usages of proxy_pass in nginx

Table of contents Proxy forwarding rules The firs...

Detailed explanation of a method to rename procedure in MYSQL

Recently I have used the function of renaming sto...