#html #css #button #flexbox #overflow
Вопрос:
Почему .div2 размер учитывается внутри .div1 , даже если элемент кнопки имеет overflow: hidden ?
Я также попытался добавить text-overflow: clip к кнопке, но результат тот же. display: flex Кажется, работает только добавление. Почему?
.div1 { padding: 10px; background-color: orange; } .div2 { width: 50px; height: 150px; background-color: red; } .button { height: 50px; overflow: hidden; /* display: flex; */ } lt;div class="div1"gt; lt;button class="button"gt; lt;div class="div2"gt;lt;/divgt; lt;/buttongt; lt;/divgt; Комментарии:
1. Каков ваш ожидаемый результат? Чего вы пытаетесь достичь?
2. «добавление дисплея: flex, похоже, работает».? Каким образом вы будете работать? Чего вы пытаетесь здесь достичь?
3. Ваш код хорошо работает на моем устройстве.
4. Для меня не имеет значения (Edge/Windows10), есть ли там гибкий дисплей или нет. Переполнения нет, и все выглядит нормально.
Ответ №1:
Вместо переполнения: скрыто; вы хотите установить видимость скрытой, как это.
видимость: скрытая;
Ответ №2:
ладно, похоже, ты просто практикуешься в CSS. Попробуйте добавить фиксированную ширину кнопки, и тогда overflow: hidden; она вступит в силу. Также кнопки по умолчанию имеют отображение встроенного блока, поэтому они автоматически подстраиваются под размер содержимого или дочернего элемента.
.div1 { padding: 10px; background-color: orange; } .div2 { width: 50px; height: 150px; background-color: red; } .button { height: 50px; overflow: hidden; /* display: flex; */ } .button-1 { width: 45px; } lt;div class="div1"gt; lt;button class="button"gt; BEFORE lt;div class="div2"gt;lt;/divgt; lt;/buttongt; lt;/divgt; lt;div class="div1"gt; lt;button class=" button button-1"gt; AFTER lt;div class="div2"gt;lt;/divgt; lt;/buttongt; lt;/divgt;