CSS：使div可調整大小

假設我有一個彈性佈局並希望使其可調整大小。CSS：使div可調整大小

我想通過水平拖動邊框來調整一個div的大小。

看看這個Fiddle

HTML

#main { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    height: 100vh; 
 
    .flex { 
 
    width: 100%; 
 
    &:nth-child(2) { 
 
     background: red; 
 
     overflow: auto; resize: horizontal; 
 
    } 
 
    } 
 
}

<div id="main"> 
 
    <div class="flex">ABC</div> 
 
    <div class="flex"> 
 
    DEF 
 
    </div> 
 
    <div class="flex">GHI</div> 
 
</div>

我會怎麼做呢？

來源

2016-12-23 jonhue

你試過'溢出：汽車; resize：both;'？它應該可以工作，但對使用Flexbox模型的元素可能會有點奇怪。 –

@HiddenHobbes這就是它的樣子：[小提琴]（https://jsfiddle.net/pddqrfav/24/） – jonhue

檢查這個plunkr

https://plnkr.co/edit/sxs6RLXVV6REzQnipfgj?p=preview

$("#second").resizable();

來源

2016-12-23 12:04:29 Sharmila

感謝您的回答！關於你的解決方案，我有一些問題：看看這個[Fiddle]（https://jsfiddle.net/pddqrfav/19/）。它還說'Uncaught TypeError：$（...）。resizable不是一個函數，儘管它在技術上是有效的。 – jonhue

sawan，你在本地遇到上述錯誤嗎？ – Sharmila

你應該遵循這個代碼

#main { 
    display: flex; 
    justify-content: space-between; 
    height: 100vh; 
    .flex { 
     width: 100%; 
     &:nth-child(2) { 
      background: red; 
      resize: both; 
      overflow: auto; 
     } 
    } 
}

來源

2016-12-23 12:44:54

看看這個[小提琴]（https://jsfiddle.net/pddqrfav/21/）。我猜flexbox佈局導致了這個結果。 – jonhue

CSS：使div可調整大小

回答

相關問題