Увеличьте div с помощью flex, когда другой скрыт, не работает на сафари

0

У меня есть следующий код:

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.toggleBlue = false;
});
span {
  cursor: pointer;
}
.wrapper {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: grey;
  margin-top: 10px;
}
.row {
  width: 35%;
}
.first {
  flex: 1;
  background-color: red;
}
.second {
  display: flex;
}
.toggle {
  width: 80%;
  background-color: blue;
}
.decrease {
  width: 30px;
  height: 20px;
  background-color: yellow;
}
.noWidth {
  width: 20px;
}
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myController">
  <span ng-click="toggleBlue = !toggleBlue">TOGGLE BLUE BOX</span>
  <div class="wrapper">
    <div class="row first"></div>

    <div class="row second" ng-class="{noWidth: toggleBlue}">
      <div class="toggle" ng-if="!toggleBlue"></div>
      <div class="decrease"></div>
    </div>
  </div>
</body>

Когда я нажимаю на текст "TOGGLE BLUE BOX", он должен скрывать синий квадрат с ng-if, увеличивать красный квадрат, чтобы заполнить его flex: 1; и измените ширину желтого прямоугольника с ng-class. Поэтому он должен просто переключать синий ящик. Это отлично работает на хроме. Но когда я пытаюсь сделать это на iPad в браузере Safari, он удаляет синюю рамку, но не увеличивает красную. Кроме того, желтая коробка, а не в конце, она за красным выглядит так:

Изображение 174551

Мой ожидаемый результат такой же, как здесь, в фрагменте. Как я могу исправить это на сафари? Я попробовал это с помощью flex: 1 1 auto; на классе. .first в случае flex 1; , но это не сработало. Есть идеи?

благодаря

  • 0
    Почему вы используете width: 35%; для .row ?
  • 0
    Версия Safari?
Показать ещё 2 комментария
Теги:
flexbox

2 ответа

1
Лучший ответ

Хорошо... Я немного смущен относительно вашего кода. Вы определяете гибкость отображения, но не используете его на всех дочерних элементах. Я исправил это как можно лучше, но дайте мне знать, если что-то не так.

Кроме того, если вам интересно, почему Safari волновался, в основном ваш css не соответствовал надлежащим стандартам (не определяя flex для всех элементов управления для детей).

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.toggleBlue = false;
});
span {
  cursor: pointer;
}
.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: grey;
  padding: 10px;
  height: 25px;
}
.first {
  flex: 1 1 35px;
  background-color: red;
}
.second {
  flex: 1 1 35px;
  background-color: blue;
}
.third{
  flex: 0 0 35px;
  background-color: yellow;
}
.noWidth {
  flex: 0 0 0px;
}
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myController">
  <span ng-click="toggleBlue = !toggleBlue">TOGGLE BLUE BOX</span>
  <div class="wrapper">
    <div class="first"></div>
    <div class="second" ng-class="{noWidth: toggleBlue}"></div>
    <div class="third"></div>
  </div>
</body>
Поделиться
  • 0
    Привет, после того, как я удалил div с классами .row .second, он работает, не меняя что-то еще. Спасибо!
  • 1
    @MrBuggy Я по-прежнему должен убедиться, что любой дочерний элемент элемента, который использует display: flex имеет flex: 1 1 auto или что-то подобное. Если вы этого не сделаете, браузер должен использовать кучу странных сценариев резервного копирования, которые могут работать некорректно в разных браузерах (как вы заметили). Для получения дополнительной информации здесь отличный учебник flexbox! css-tricks.com/snippets/css/a-guide-to-flexbox
Показать ещё 1 комментарий
0

добавленной

.decrease {
   flex: 1 0;
}
Поделиться
  • 0
    Привет спасибо, но это все еще не работает ...
  • 0
    я не понимаю, как ваш код должен работать правильно ... (
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню