Question

我在display flex上有问题，但这仅发生在firefox中，其思想不是放置绝对位置，所以我将所有内容都放在flex中。

有没有不使用绝对位置的解决方案吗？

当浏览器是小窗口时，会发生此错误

谷歌浏览器：

Firefox：

CSS：

version: "3"

services:
  web:
    image: node:9
    ports:
      - 3000:3000
    working_dir: /app
    volumes:
      - ./:/app
    command: bash -c 'yarn && cd src && yarn dev'
    depends_on:
      - api
  api:
    image: node:9
    ports:
      - 3001:3001
    working_dir: /api
    volumes:
      - ./:/api
    command: bash -c 'yarn && cd api && yarn dev'
    depends_on:
      - mongo
      - nats
  mongo:
    image: mongo:3.4
    ports:
      - 127.0.0.1:27017:27017
    volumes:
      - ./db:/data/db
  minio:
    image: minio/minio
    ports:
      - 9000:9000
    environment:
      - MINIO_ACCESS_KEY=miniokey
      - MINIO_SECRET_KEY=miniosecret
    volumes:
      - ./minio:/data
    command: ["server", "/data"]
  createbuckets:
    image: minio/mc
    depends_on:
      - minio
    entrypoint: >
      /bin/sh -c "
      while ! /usr/bin/nc minio 9000; do sleep 2s; done;
      /usr/bin/mc config host add myminio http://minio:9000 miniokey miniosecret;
      /usr/bin/mc mb myminio/vividaura;
      /usr/bin/mc policy download myminio/vividaura;
      /usr/bin/mc mb myminio/vividaura-test;
      /usr/bin/mc policy download myminio/vividaura-test;
      exit 0;
      "
  nats:
    image: nats:1.1.0-linux
    ports:
      - 127.0.0.1:4222:4222
      - 127.0.0.1:8222:8222

HTML：

* {
  padding: 0;
  margin: 0;
}

.w-100 {
  width: 100%;
}

.flex {
  display: flex;
  align-items: center;
}

.special {
  border-bottom: 1px solid #CCC;
  padding: 10px;
}

input {
  width: 100%;
  padding: 10px;
  border: none;
  background: gray;
}

.flex-2 {
  padding-left: 10px;
  font-size: 28px;
}

.content {
  white-space: nowrap;
}

URL：https://codepen.io/anon/pen/RJmWmy

Answer 1

宽度和弹性布局不能很好地协同工作。另外，您要求输入的宽度为宽度的100％，这意味着它将推出地址簿元素。同样，输入字段具有您可能需要重置的最小宽度。也许像这样...

注意：我将地址簿图标替换为蓝色背景div，因此不必使CSS网址正常工作。

* {
  padding: 0;
  margin: 0;
}

.flex {
   display: flex;
  align-items: center;
}

.flex > .form-fields {
   flex: 1 1 0px;
   display: flex;
}

.flex > .content {
   flex: 0 0 auto;
   display: flex;
  white-space: nowrap;
}

.flex > .form-fields > .text-input {
  flex: 1 1 0px;
  border-bottom: 1px solid #CCC;
  padding: 10px;
  padding: 10px;
  border: none;
  background: gray;
  min-width: 0px;
}

.flex > .form-fields > .address-book-wrapper {
   flex: 0 0 28px;
   padding: 0px 8px;
   background: blue;
}

<div class="flex">
  <div class="form-fields">
    <input type="" class="text-input" />
    <div class="address-book-wrapper">
      <i class="fa fa-address-book" aria-hidden="true"></i>
    </div>
  </div>
  <div class="content">
    content info box content
  </div>
</div>

在Firefox中显示柔性（覆盖）响应

1 个答案: