色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

兩個(gè)50%寬度的flex項(xiàng)目，使用ove flow-x:scroll won & # 39；t收縮

CSS

我希望一個(gè)flex容器有兩個(gè)flex項(xiàng)目(項(xiàng)目A和項(xiàng)目B ),寬度是父容器的50%。

B項(xiàng)可能包含沒有換行的很長的字符串，它應(yīng)該可以沿著X軸滾動(dòng)，這樣它就可以保持父容器的50%的寬度。

下面是我想出的不起作用的代碼，因?yàn)锽項(xiàng)擴(kuò)展超過了期望的50%。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex w-full justify-center">
    <div class="flex flex-none">
      <div class="w-1/2 min-w-0 bg-[#4f4f61] py-8 text-white overflow-x-auto">Item A</div>
      <div class="w-1/2 min-w-0 bg-[#a0cecd] py-8 overflow-x-auto">
        Item BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
      </div>
    </div>
  </body>
</html>

https://jsfiddle.net/y37hd8fm/5/

我做錯(cuò)了什么？

.max-w-100{
  max-width:100%;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex w-full justify-center">
    <div class="flex flex-none max-w-100">
      <div class="w-1/2 min-w-0 bg-[#4f4f61] py-8 text-white overflow-x-auto">A</div>
      <div class="w-1/2 min-w-0 bg-[#a0cecd] py-8 overflow-x-auto">
        BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
      </div>
    </div>
  </body>
</html>

我用網(wǎng)格布局代替flexbox解決了這個(gè)問題。雖然仍然不確定為什么flexbox會(huì)有這種行為并且超過50%的項(xiàng)目大小。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex w-full justify-center">
    <div class="grid grid-cols-2">
      <div class="bg-[#4f4f61] py-8 text-white overflow-x-auto">Item A</div>
      <div class="bg-[#a0cecd] py-8 overflow-x-auto">
        Item BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
      </div>
    </div>
  </body>
</html>

Edwin的另一個(gè)解決方案也適用于我提供的簡(jiǎn)化示例，但是在我的真實(shí)代碼中，我需要flex容器的最大寬度為1400px，所以我不能使用max-w-full。而指定max-w-[1400px]在瀏覽器寬度小于1400px的情況下仍然有一個(gè)亂七八糟的B項(xiàng)大小調(diào)整。

我看你已經(jīng)用網(wǎng)格解決了。但是在第一個(gè)例子中，通過向容器div(兩列的父列)添加w-full，可以很容易地解決這個(gè)問題。

如果父級(jí)沒有寬度設(shè)置，w-1 /2可能無法正常工作，因?yàn)闉g覽器會(huì)根據(jù)內(nèi)容自動(dòng)將設(shè)置為父級(jí)。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex w-full justify-center">
    <div class="flex flex-none w-full">
      <div class="w-1/2 min-w-0 bg-[#4f4f61] py-8 text-white overflow-x-auto">A</div>
      <div class="w-1/2 min-w-0 bg-[#a0cecd] py-8 overflow-x-auto">
        BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
      </div>
    </div>
  </body>
</html>

https://jsfiddle.net/2x7ckop4/1/