How to solve the problem of horizontal scrolling in multi-layer nesting of flex layout?

Solutions to the problem of multi-layer nesting of Flex layouts causing horizontal scroll bars

When using Flex layout for multi-layer nesting, horizontal scroll bars often appear, especially when scrolling to the far left, the content cannot be fully displayed. This article analyzes this problem and provides effective solutions.

Problem description

The following code snippet demonstrates this problem:

<div class="container">
  <div class="cmp-main">
    <div class="cmp-core">
      <div class="process-core">
        <div class="item-wrap">
          <div class="item">head</div>
        </div>
        <div class="item-wrap">
          <div class="item-condition">
            <div class="condition">
              <div class="item-wrap">
                <div class="item">Data 1</div>
                <div class="item">Data 2</div>
                <div class="item">Data 3</div>
                <div class="item">Data 4</div>
                <div class="item">Data 5</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.container { margin: 80px; width: auto; }
.cmp-main { display: flex; overflow: auto; flex-direction: column; align-items: center; position: relative; width: 100%; }
.cmp-core { background-color: #f5f5f7; position: relative; display: flex; flex-direction: column; align-items: center; }
.process-core { display: flex; flex-direction: column; align-items: center; }
.item-wrap { display: flex; flex-direction: column; justify-content: center; flex-wrap: nowrap; }
.item { width: 230px; margin-top: 5px; cursor: pointer; border: 1px solid white; background-color: white; border-radius: 0 0 6px 6px; }
.item-condition { position: relative; display: flex; flex-direction: column; align-items: center; }
.condition { position: relative; display: flex; }
.condition .item-wrap { position: relative; display: flex; flex-direction: row; }
.condition .item-wrap .item { position: relative; display: flex; width: 500px; height: 100px; border: 1px solid red; }

Run this code and the horizontal scroll bar will appear, and the content on the left cannot be fully displayed.

Solution

The root cause of the problem lies in the unnecessary nesting of Flex layouts and the settings of width properties. The Flex layout of .condition .item-wrap causes the child element width to automatically shrink, resulting in horizontal scrolling.

Solution:

1. Thin up Flex layout: Remove unnecessary Flex layout nesting and retain only necessary Flex containers. Many .cmp-main , .cmp-core , .process-core , .item-wrap , .item-condition and .condition Flex layout settings are redundant.

2. Use the flex attribute to control width: Change the style of .condition .item-wrap .item to:

 .condition .item-wrap .item {
  flex: 0 0 500px; /* Use flex attribute to fix width*/
  height: 100px;
  border: 1px solid red;
}

flex: 0 0 500px; Make sure that each .item element width is fixed to 500px and will not scale because of the parent element.

3. Control the scrolling area: In order to fix the head, only the data area is scrolled, modify the style of .condition :

 .condition {
  overflow-x: auto; /* Only horizontal scrolling is allowed*/
}

4. Head centered: To center the head, you can use the following style:

 .process-core > .item-wrap:first-child {
  text-align: center; /* center the text content*/
}

Through the above adjustments, the horizontal scrolling problem caused by multi-layer nesting of Flex layout can be effectively solved, and ensure that all content can be displayed in full. Remember, when using Flex layouts, carefully consider the role of each property to avoid unnecessary nesting and style conflicts.

The above is the detailed content of How to solve the problem of horizontal scrolling in multi-layer nesting of flex layout?. For more information, please follow other related articles on the PHP Chinese website!