Question

我在Chrome中的Flex容器中有一个input，除非我添加min-width: 0，否则它不会考虑容器的宽度。这似乎在IE中正常工作。

这里发生了什么？

＆＃13;

.input-with-button {
  display: flex;
  width: 100px;
  border: 5px solid blue;
  margin-bottom: 10px;
}

.input-with-button input {
  flex-basis: 100%;
}

＆＃13;

<div class='input-with-button'>
  <div>Test</div>
</div>

<div class='input-with-button'>
  <input>
</div>

＆＃13;

Answer 1

它在IE中工作的原因是因为它选择了flex-basis: 100%，但它不应该。

它在Chrome中溢出（并且应该在IE中）的原因是，由于其min-width设置为auto，因此弹性项目默认不能小于其内容，并且在此案例form元素（例如input）使用浏览器构建的样式表设置默认宽度。

min-width: 0工作的原因是，当设置为0时，Flex项目将会是{em> flex-shrink 值为1（默认值），允许收缩，并调整到父母的宽度。

Stack snippet

.input-with-button {
  display: flex;
  width: 100px;
  border: 5px solid blue;
  margin-bottom: 10px;
}

.input-with-button input {
  flex-basis: 100%;
  min-width: 0;                        /*  added  */
}

<div class='input-with-button'>
  <div>Test</div>
</div>

<div class='input-with-button'>
  <input>
</div>

作为附注，并且正如其他答案中所提到的，更改元素的默认宽度当然也是一个选项，无论它是否为form元素。

Stack snippet

.input-with-button {
  display: flex;
  width: 100px;
  border: 5px solid blue;
  margin-bottom: 10px;
}

.input-with-button input {
  /*flex-basis: 100%;                     removed  */
  width: 100%;                        /*  added  */
}

<div class='input-with-button'>
  <div>Test</div>
</div>

<div class='input-with-button'>
  <input>
</div>

Answer 2

将box-sizing: border-box;和max-width: 100%;添加到您的输入中。输入具有默认宽度，可以通过这种方式覆盖/限制。

＆＃13;

.input-with-button {
  display: flex;
  width: 100px;
  border: 5px solid blue;
  margin-bottom: 10px;
}

.input-with-button input {
  flex-basis: 100%;
  box-sizing: border-box;
  max-width: 100%;
}

＆＃13;

<div class='input-with-button'>
  <div>Test</div>
</div>

<div class='input-with-button'>
  <input>
</div>

＆＃13;

Answer 3

这个也有效

＆＃13;

    $total_records = $this->db->count_all_results('videos');
    $this->db->select('*');
    $this->db->from('videos');
    $this->db->where('videos_publication', '1');
    $this->db->join('video_author','video_author.video_author_id=videos.videos_author_id','left');
    $this->db->where('videos_id >=', $total_records - 20);
    $this->db->join('videos_views','videos_views.videos_views_id=videos.videos_id','left');
    $this->db->order_by("videos_views_total","desc");        
    $this->db->limit(20);
    $query_result = $this->db->get();
    $result = $query_result->result();
    return $result;

＆＃13;

    $this->db->select('*');
    $this->db->from('videos');
    $this->db->where('videos_publication', '1');
    $this->db->join('video_author','video_author.video_author_id=videos.videos_author_id','left');
    $this->db->where('videos_id >=', $total_records - 20);
    $this->db->join('videos_views','videos_views.videos_views_id=videos.videos_id','left');
    $this->db->select('SUM(videos_views_total)');
    $this->db->group_by('MONTH(videos_views_date)');
    $this->db->group_by('videos_views_id');
    $this->db->order_by("videos_views_total","desc");        
    $this->db->limit(20);
    $query_result = $this->db->get();
    $result = $query_result->result();
    return $result;

＆＃13;

输入不受柔性容器宽度的影响

3 个答案: