Question

基本上我想要两个面板并排，每个面板占据宽度的50％。内容不应该被包装，如果它占用的宽度超过可用的宽度，那么溢出应该开始。没有什么革命性的。

我重新创建了以下repro，它显示了Chrome中的内容。基本上两个外部div的组合也是弯曲意味着宽度因某些奇怪的原因而爆炸。

不工作 - http://codepen.io/anon/pen/GjjLjA?editors=1100

＆＃13;

public class MainActivity extends Activity {

    String[] options = {"a1", "a2", "a3", "b1", "b2", "b3", "b4", "b5"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // An adapter object
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.select_dialog_item, options);

        AutoCompleteTextView autoCompleteTextView = (AutoCompleteTextView)findViewById(R.id.autoCompleteTextView);
        autoCompleteTextView.setAdapter(adapter);
        autoCompleteTextView.setThreshold(1);

        // Set the listeners
        autoCompleteTextView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Log.d("OnItemClick", "[AutoCompleteTextView] Item clicked");
            }
        });
        autoCompleteTextView.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                Log.d("onItemSelected", "[AutoCompleteTextView] Item selected");
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {
                Log.d("onNothingSelected", "[AutoCompleteTextView] Nothing here");
            }
        });

    }
}

＆＃13;

.container {
  display: flex;
  width: 100%;
}
article {
  width: 50%;
  overflow: scroll;
}
li {
  white-space: nowrap;
}

＆＃13;

以下内容删除了一个外部div，内容现在正常按预期分割。

工作 - http://codepen.io/anon/pen/NRRmdX?editors=1100

＆＃13;

<div style="display: flex; flex: auto;">
  <div style="display: flex; flex: auto;">
    <div class="container">
      <article>
        <ul>
          <li>Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8</li>
          <li>Accept-Encoding: gzip, deflate, sdch</li>
          <li>Accept-Language: en-US,en;q=0.8</li>
          <li>Cache-Control: no-cache</li>
          <li>Connection: keep-alive</li>
          <li>Content-Type: text/html</li>
          <li>Host: inventory.internal.com</li>
          <li>Pragma: no-cache</li>
        </ul>
      </article>
      <article>
        <ul>
          <li>Cache-Control: no-cache</li>
          <li>Content-Encoding: gzip</li>
          <li>Content-Type: text/html</li>
          <li>Date: Mon, 02 Nov 2015 06:39:26 GMT</li>
          <li>Server: inventory.internal.com</li>
          <li>Status: 200 OK</li>
          <li>Strict-Transport-Security: max-age=31536000; includeSubdomains; preload</li>
          <li>Transfer-Encoding: chunked</li>
          <li>Vary: Accept-Encoding</li>
         </ul>
      </article>
    </div>
  </div>
</div>

＆＃13;

.container {
  display: flex;
  width: 100%;
}
article {
  width: 50%;
  overflow: scroll;
}
li {
  white-space: nowrap;
}

＆＃13;

这是Chrome中的错误还是我在这里遗漏了有关flexbox使用的内容？

在Chrome中使用带有nowrap内容的flexbox的并排面板具有奇怪的宽度行为

0 个答案: