網(wǎng)站導(dǎo)航

CSS屬性& quot書寫模式:垂直-lr & quot；Firefox中的flex-box有問題

我遇到了一個有趣的問題，我在Firefox (v114.01)中構(gòu)建了一個動態(tài)導(dǎo)航菜單，但它的內(nèi)容無法正確呈現(xiàn)。它在兩個邊緣(v114.0.1823.43)和鉻(v114.0.5735.134)上都呈現(xiàn)良好。

好像是& quot書寫模式:垂直-lr & quot；屬性在Firefox中的應(yīng)用有所不同。

我使用寫模式的原因是為了克服當flex box項目在列模式中換行時，flexbox換行列不增長其寬度的問題，容器不增長其寬度。同樣，這似乎在Edge/Chrome中工作得很好，但在Firefox中不行。

這里有一個代碼筆的例子:https://codepen.io/Jean-Paul-Larach/pen/vYQNRPY

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.wrapper {
    display: flex;
    flex-direction: row;
    padding-top: 0px; 
    padding-bottom: 0px; 
    padding-right: 0px; 
    max-width: 90vw;
}

h4 {
  margin: 0;
}

.group {
  display: flex;
  flex-direction: row;
  > div {
    display: inline-flex;
    flex-flow: row wrap;
  }
}

.groupHeader {
    padding-top: 0px;
    padding-left: 5px;
    margin: 0 0 10px 0;
    writing-mode: horizontal-tb;
    font-style: italic;
 }

.section {
    writing-mode: horizontal-tb;
 }

.navMenuLink {
  writing-mode: horizontal-tb;
  padding: 0 0.5rem;
  margin: 0 0.5rem;
}

.header {
  flex-wrap: wrap;
  display: inline-flex;
  flex-flow: row wrap;
  writing-mode: vertical-lr;
  max-height: 55vh;
}

超文本標記語言

<div class="wrapper">
  <div style="padding-right: 15px; overflow-x: auto;">
    <div class="header">
      <div class="group">
        <h3 class="groupHeader">Groups</span></h3>
        <div>
          <div class="section">
            <h4><span><b>Group 1</b></span></h4>
          </div><a class="navMenuLink">Child 1</a>
          <div class="section">
            <h4><span><b>Group 2</b></span></h4>
          </div><a class="navMenuLink">Child 1</a><a class="navMenuLink">Child 2</a><a class="navMenuLink">Child 3</a><a class="navMenuLink">Child 4</a><a class="navMenuLink">Child 5</a>
          <div class="section">
            <h4><span><b>Group 3</b></span></h4>
          </div><a class="navMenuLink">Child 1</a><a class="navMenuLink">Child 2</a><a class="navMenuLink">Child 3</a><a class="navMenuLink">Child 4</a><a class="navMenuLink">Child 5</a><a class="navMenuLink">Child 6</a><a class="navMenuLink">Child 7</a>
          <div class="section">
            <h4><span><b>Group 4</b></span></h4>
          </div><a class="navMenuLink">Child 1</a><a class="navMenuLink">Child 2</a>
        </div>
      </div>
      <div>
        <div role="separator" aria-orientation="vertical"></div>
      </div>
      <div class="group">
        <h3 class="groupHeader"><span>Sites</span></h3>
        <div>
          <div class="section">
            <h4><span><b>Group 1</b></span></h4>
          </div><a class="navMenuLink">Child 1</a><a class="navMenuLink">Child 2</a><a class="navMenuLink">Child 3</a><a class="navMenuLink">Child 4</a><a class="navMenuLink">Child 5</a><a class="navMenuLink">Child 6</a><a class="navMenuLink">Child 7</a><a class="navMenuLink">Child 8</a><a class="navMenuLink">Child 9</a><a class="navMenuLink">Child 10</a>
        </div>
      </div>
    </div>
  </div>
</div>

Edge截圖: Edge