Skip to main content
本文に 167 文字追加; タイトルを編集
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

Flexboxのオーバーフローについて flex アイテムで width の大きさが 100% 以上にならない

Flexbox使った際にwidth200%でFlexboxの2倍 width: 200% で Flexbox の 2 倍の大きさのアイテムができると思いましたが違いました。何故こうなるのか教えてください、よろしくお願いします。

<div style='width: 50vw; margin: 0 auto; display: flex; justify-content: center;  align-items: center;border: 1px solid black;'>
    <div style='border: 1px solid black; width: 150%;
  height: 100%; overflow: auto;'>
    <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>
    </div>
</div>

<div style='width: 50vw; margin: 0 auto; display: flex; justify-content: center;  align-items: center;border: 1px solid black;'>
  <div style='border: 1px solid black; width: 150%;
  height: 100%; overflow: auto;'>
    <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
    </p>
  </div>
</div>

Flexboxのオーバーフローについて

Flexbox使った際にwidth200%でFlexboxの2倍の大きさのアイテムができると思いましたが違いました。何故こうなるのか教えてください、よろしくお願いします。

<div style='width: 50vw; margin: 0 auto; display: flex; justify-content: center;  align-items: center;border: 1px solid black;'>
    <div style='border: 1px solid black; width: 150%;
  height: 100%; overflow: auto;'>
    <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>
    </div>
</div>

flex アイテムで width の大きさが 100% 以上にならない

Flexbox使った際に width: 200% で Flexbox の 2 倍の大きさのアイテムができると思いましたが違いました。何故こうなるのか教えてください、よろしくお願いします。

<div style='width: 50vw; margin: 0 auto; display: flex; justify-content: center;  align-items: center;border: 1px solid black;'>
  <div style='border: 1px solid black; width: 150%;
  height: 100%; overflow: auto;'>
    <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
    </p>
  </div>
</div>

本文から 9 文字削除
ソース リンク
cubick
  • 2.1万
  • 5
  • 27
  • 64

お疲れ様です。

Flexboxを使った際にwidth200%でFlexboxの2倍の大きさのアイテムができると思いましたが違いました。何故こうなるのか教えてください、よろしくお願いします。

<div style='width: 50vw; margin: 0 auto; display: flex; justify-content: center;  align-items: center;border: 1px solid black;'>
    <div style='border: 1px solid black; width: 150%;
  height: 100%; overflow: auto;'>
    <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>
    </div>
</div>;```;

お疲れ様です。

Flexboxを使った際にwidth200%でFlexboxの2倍の大きさのアイテムができると思いましたが違いました。何故こうなるのか教えてください、よろしくお願いします。

<div style='width: 50vw; margin: 0 auto; display: flex; justify-content: center;  align-items: center;border: 1px solid black;'>
    <div style='border: 1px solid black; width: 150%;
  height: 100%; overflow: auto;'>
    <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>
    </div>
</div>;```

Flexboxを使った際にwidth200%でFlexboxの2倍の大きさのアイテムができると思いましたが違いました。何故こうなるのか教えてください、よろしくお願いします。

<div style='width: 50vw; margin: 0 auto; display: flex; justify-content: center;  align-items: center;border: 1px solid black;'>
    <div style='border: 1px solid black; width: 150%;
  height: 100%; overflow: auto;'>
    <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>
    </div>
</div>;
ソース リンク

Flexboxのオーバーフローについて

お疲れ様です。

Flexboxを使った際にwidth200%でFlexboxの2倍の大きさのアイテムができると思いましたが違いました。何故こうなるのか教えてください、よろしくお願いします。

<div style='width: 50vw; margin: 0 auto; display: flex; justify-content: center;  align-items: center;border: 1px solid black;'>
    <div style='border: 1px solid black; width: 150%;
  height: 100%; overflow: auto;'>
    <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>
    </div>
</div>```