LoginSignup
UMA9626
@UMA9626 (UMA)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

flexboxでgapを指定している際に要素の横幅が圧縮される

Q&AClosed
HTMLCSSHTML5flexbox

困っていること

前提：
・複数の子要素を持ち、それらを縦向きに並べ、一定の縦幅で右列に折り返す要素left-boxがある
・これを包む親要素wrapperがある(グレーの要素)
image.png

ここで、left-boxにgap: 20pxを設定し、wrapperにdisplay: flexを設定すると、left-box要素の右端の位置とleft-box内の子要素の最右端の位置がずれます。
(分かりやすいように、left-boxを濃いグレーにしました。)
image.png
left-boxの右端が、子要素の右端よりもgap分だけ左側に圧縮されています。

例えばleft-boxの右位置に別の要素を置きたい場合などに重なってしまいます。
image.png

解決したいこと

上記のように、gapがあり折り返すflexboxをflexboxで包んだときに、要素の右端と子要素の右端を一致させる方法があれば教えて頂きたいです。
もしくは、これは仕様であり不可ということであればその旨も教えて頂きたいです。
(代替案の提案は一旦不要です :bow: )

該当するソースコード

<html>
  <head>
    <style>
      .wrapper {
        width: 400px;
        height: 400px;
        background-color: lightgray;
        display: flex; /* これを追加するとずれる */
      }
      .left-box {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 20px;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="left-box">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
      </div>
    </div>
  </body>
</html>

自分で試したこと

特になにもしていません。
原因が良く分かっていないので、ChatGPTにもうまく聞けず...

0

2Answer

isshy_exception
@isshy_exception

Flexboxのバグらしいです。

ですので、以下のようにすれば問題無さそうです。

      .wrapper {
        width: 400px;
        height: 400px;
        background-color: lightgray;
        display: flex; /* これを追加するとずれる */
      }
      .left-box {
        height: 100%;
        display: flex;
        /*   flex-direction: column; */
        writing-mode: vertical-lr; /* 追加 */
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 20px;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: red;
        writing-mode: horizontal-tb; /* 追加 */
      }
1

Comments

  1. @UMA9626

    Questioner

    @isshy_exception さん
    ありがとうございます！
    めちゃくちゃ助かります！！！

Comments

  2. @juner

    @lhankor_mhy ただ、それは既に機能しているの(=fixed)ですわ……

    image.png

    <ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>
<style>
ul {
  background: hsla(0,100%,50%,.1);
  border: 1px solid red;
  display: inline-flex;
  flex-flow: column wrap;
  list-style: none;
  margin: 0;
  max-height: 12em;
  padding: .5em 0 0 .5em;
  resize: both;
  overflow: hidden;
}

li {
  background: hsla(0,0%,0%,.1);
  margin: 0 .5em .5em 0;
  padding: .5em;
}

body {
  margin: 1em;
}
</style>

    playground

  3. @lhankor_mhy

    Chrome116ですから、去年の話ですものね。
    Safari はわからないですが、Firefox はまだ対応できてないです。

    そもそも、Flexible Box Level 1 の仕様バグが元々あって、各ブラウザは仕様通りに実装してたみたいです。仕様バグが解消されたのが2015年で実装が修正されたのがChromeは去年だった、と。
    https://www.w3.org/TR/css-flexbox-1/#change-2015-intrinsic-cross-container

Your answer might help someone💌

LoginSign Up

Popular Questions