收缩以适应flexbox中的内容，或flex-basis：内容解决方法？ [英] Shrink to fit content in flexbox, or flex-basis: content workaround?

问题描述

我有一个web应用程序，我使用flexbox布局。

我试图既填充屏幕（它是一个应用程序，而不是文档） ，并尽可能不指定任何固定的宽度或高度，因为内容可以是各种各样的东西（全流体布局！梦！）

所以我需要流体高度，全宽度顶部和底部，然后在中间的主面板填充剩余的垂直空间，分成多个列，每个列在过高时滚动，并且其中每个非主要列的宽度应收缩以适合其内容，以及占用剩余空间的主列。

我这么近，但不得不诉诸显式调整非主列 - 我相信 flex-basis：content; 应该这样做，但浏览器不支持。

显示固定大小列的

我的问题是，对于 flex-basis ：content ，或者是实现这个目标的替代方法？

我可能需要固定上面的列大小，或者使用javascript，但我有一个梦想DAMN。

解决方案

事实证明，它正在缩小和增长，正在提供所需的行为;除了在所有当前浏览器中flexbox不占用垂直滚动条！

你可以看到这里，这是我在添加固定宽度之前使用的原始代码，它看起来像列不增长到适应文本：

http://jsfiddle.net/2w157dyL/1/

但是，如果您使该列中的内容更宽，您会看到它总是

所以修复非常，非常简单 - 添加足够的右边填充来考虑滚动条：

http://jsfiddle.net/2w157dyL/2 /

  main> section {overflow-y：auto; padding-right：2em; } 
 
 
 
这是我在尝试Michael_B提出的一些建议时特别添加一个填充缓冲区），我发现这一点，非常感谢！
 
 
 
编辑：我看到他也发布了一个小提琴，做同样的事情 - 非常感谢您的帮助
 
I have a webapp with which I'm using flexbox for layout.

I'm trying to both fill the screen (it's an app, not a document), and as far as possible to not specify any fixed widths or heights as the content could be all sorts of things (Full fluid layout! The dream!)

So I need fluid height, full width headers and footers, and then a main panel in the middle filling the remaining vertical space, divided into columns, each of which scrolls when too high, and where the width of each non-primary column should shrink to fit its content, and a primary column which uses up the remaining space.

I am so close, but have had to resort to explicitly sizing the non-main columns - I believe that flex-basis: content; is supposed to do this but isn't supported by browsers yet.

Here's a minimal demo showing fixed size columns:



var list = document.querySelector('ul')

for (var i = 0; i < 100; i++) {
  var li = document.createElement('li')
  li.textContent = i
  list.appendChild(li)
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
main > section {
  overflow-y: auto;
  flex-basis: 10em;
  /* Would be better if it were fluid width/shrink to fit, unsupported: */
  /* flex-basis: content; */
}
main > section:last-child {
  display: flex;
  flex: auto;
  flex-direction: column;
}
main > section:last-child > textarea {
  flex: auto;
}

<header>
  <h1>Heading</h1>
</header>

<main>
  <section>
    <h1>One</h1>
    <ul>
    </ul>
  </section>

  <section>
    <h1>Two</h1>
  </section>

  <section>
    <header>
      <h1>Three</h1>
    </header>
    <textarea></textarea>
    <footer>
      <p>Footer</p>
    </footer>
  </section>
</main>

<footer>
  <p>Footer</p>
</footer>





Which looks like this - I want columns One and Two to shrink/grow to fit rather than being fixed:



My question is, is there a CSS-only workaround for flex-basis: content, or an alternative way to realise this goal? 

I can possibly live with fixing the column sizes as above, or using javascript, but I HAVE A DREAM DAMN IT.
解决方案
It turns out that it was shrinking and growing correctly, providing the desired behaviour all along; except that in all current browsers flexbox wasn't accounting for the vertical scrollbar! Which is why the content appears to be getting cut off.

You can see here, which is the original code I was using before I added the fixed widths, that it looks like the column isn't growing to accomodate the text:

http://jsfiddle.net/2w157dyL/1/

However if you make the content in that column wider, you'll see that it always cuts it off by the same amount, which is the width of the scrollbar.

So the fix is very, very simple - add enough right padding to account for the scrollbar:

http://jsfiddle.net/2w157dyL/2/



  main > section {
    overflow-y: auto;
    padding-right: 2em;
  }





It was when I was trying some things suggested by Michael_B (specifically adding a padding buffer) that I discovered this, thanks so much!

Edit: I see that he also posted a fiddle which does the same thing - again, thanks so much for all your help

                        
这篇关于收缩以适应flexbox中的内容，或flex-basis：内容解决方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！