Solution to the problem of collapsing in safari and firefox when writing-mode: vertical-rl; and display: flex; are used together.

CSS writing-mode: vertical-rl; is a useful property for vertical text, but when combined with display: flex; it can cause layout corruption in Safari and Firefox. In particular, the vertical writing area will have zero width, elements will not be displayed correctly, and so on. This article details the cause of this problem and multiple solutions.

Problem Cause

When writing-mode: vertical-rl; is used in conjunction with display: flex;, Flexbox’s layout calculations may not work correctly in some browsers, resulting in elements that are not properly width- and positioned. This is because the vertical writing mode setting interferes with Flexbox’s calculation of element size and orientation, causing the layout to be corrupted in an unintended way.

Solution

Method 1: Set writing-mode: vertical-rl; on the parent element

One simple solution is to apply writing-mode: vertical-rl; to the parent element that wraps the entire vertical writing area and not set writing-mode on individual elements. This allows you to separate the vertical writing area from the area affected by Flexbox.

<style>
  .wrapper {
    display: flex;
  }

  .vertical {
    writing-mode: vertical-rl;
  }

  .horizontal {
    writing-mode: horizontal-tb;
  }
</style>

<div class="wrapper">
  <div class="vertical">
    <p>vertical text</p>
  </div>
  <div class="horizontal">
    <p>normal text</p>
  </div>
</div>

Method 2: Use display: inline-flex;

Use display: inline-flex; instead of display: flex; to prevent collapses in Safari and Firefox. inline-flex improves compatibility with vertical writing, since the element is displayed inline while maintaining the flex container functionality. This improves compatibility with vertical writing.

<style>
  .container {
    display: inline-flex;
    writing-mode: vertical-rl;
    border: 1px solid #ccc;
  }

  .item {
    padding: 10px;
    background-color: #f0f0f0;
  }
</style>

<div class="container">
  <div class="item">vertical-item1</div>
  <div class="item">vertical-item2</div>
</div>

Method 3: Use CSS Grid

Another way to build a vertical layout without Flexbox is to use a CSS Grid, which is suitable for two-dimensional layouts and can be used in combination with vertical writing for stable display.

<style>
  .grid-container {
    display: grid;
    grid-auto-flow: column;
    writing-mode: vertical-rl;
    gap: 10px;
  }

  .grid-item {
    background-color: #e0e0e0;
    padding: 10px;
  }
</style>

<div class="grid-container">
  <div class="grid-item">vertical-grid1</div>
  <div class="grid-item">vertical-grid2</div>
</div>

Method 4: Use writing-mode: horizontal-tb; only for specific elements to disable vertical writing

If you set writing-mode: vertical-rl; on a parent element, apply writing-mode: horizontal-tb; to the parts of the element that you do not want to be written vertically to remove vertical writing. This allows for flexible use of vertical and horizontal writing.

<style>
  .parent {
    writing-mode: vertical-rl;
    display: flex;
  }

  .child-horizontal {
    writing-mode: horizontal-tb;
  }
</style>

<div class="parent">
  <div>vertical</div>
  <div class="child-horizontal">horizontal</div>
</div>

Summary

The collapse in Safari and Firefox caused by the combination of writing-mode: vertical-rl; and display: flex; can be avoided by setting the CSS. By setting writing-mode on the parent element and utilizing inline-flex and CSS Grid, the problem of vertical layout can be solved and display collapse between browsers can be prevented. By adopting appropriate measures, you can achieve a more stable vertical writing design.