如何使用 CSS flexbox 設置固定寬度的列 - How to set a fixed width column with CSS flexbox

問題：

CodePen: http://codepen.io/anon/pen/RPNpaP .代碼筆： http ://codepen.io/anon/pen/RPNpaP。

I want the red box to be only 25 em wide when it's in the side-by-side view - I'm trying to achieve this by setting the CSS inside this media query:我希望紅色框在並排視圖中只有 25 em 寬 - 我試圖通過在此媒體查詢中設置 CSS 來實現這一點：

@media all and (min-width: 811px) {...}

to:到：

.flexbox .red {
  width: 25em;
}

But when I do that, this happens:但是當我這樣做時，會發生這種情況：

http://i.imgur.com/niFBrwt.png http://i.imgur.com/niFBrwt.png

Any idea what I'm doing wrong?知道我做錯了什麼嗎？

---

解決方案：

參考一： https://en.stackoom.com/question/21OWi
參考二： https://stackoom.com/question/21OWi