Sign in to follow this  
sarcus

Flex-контейнер с input элементами расширяет границы основного блока

Recommended Posts

Основной блок содержит 2 блока
1-й с некоторым текстом
2-й flex блок с input элементами

2-й блок как будто не видит <b>ширины</b> основного блока, которую <b>задает 1-й блок</b> (sometext)  
и расширяет основной. 

Подскажите как решить данную проблему ? 

Пример :  https://jsfiddle.net/sarcus/1vmaf3wo/14/

 

Но если вместо input (class='inp') вставить div то все приходит в норму:

https://jsfiddle.net/1vmaf3wo/83/

<style>
.cont { 
            position: absolute;
            top : 200px; left: 30px;
            border: 1px solid #ccc;
        }
        .ctrl {  
            display: flex; 
            width: 100%;
            flex-direction: row;
            border: 1px solid#ccc; 
        }
        .btn { 
            flex: 0 0 auto;
            
        }
        .inp {
            flex: 1 1 auto;
            width: 100%;
        }
</style>
<div class="cont">
            <div class="sometext">555 5555 5555 5555 5556</div>
            <div class="ctrl">
                    <input type="button" class="btn"  value="<<" />
                    <input class="inp" type="text" />
                    <input type="button" class="btn" value=">>" />
            </div>
            
        </div>

 

Edited by sarcus

Share this post


Link to post
Share on other sites

а почему он должен что то видеть и кто решил что блок с текстом это "основной" блок? У вас абсолютно позиционированный родитель, а значит он принимает ширину контента. У input type="text" ширина по умолчанию равна 169px, плюс добавляем ширину кнопок по бокам, плюс бордер. Все вместе задает ширину для блока cont, так как является наиболее широким блоком. Ну а див с текстом просто растягивается по этой ширине, так как по умолчанию у дива ширина 100% В случае же замены инпута на див, самым широким становится именно блок с текстом, поэтому cont и становится уже

Share this post


Link to post
Share on other sites

 

1 час назад, Switch74 сказал:

попробуйте
 


.inp {
    flex: 1 1 auto;
    width: 100px;
}

 

Работает!  

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Nathman999
      В #topmenu есть 4 прямоугольника-ссылки:"Основное","HTML","CSS","Сайт"
      Ссылки выглядят примерно так: http://htmlbook.ru/#main 
      Хотя если на них нажать никаких переходов не происходит(по крайней мере в адресной строке хрома ничего не меняется).
      Но панель под этими прямоугольниками меняется. А именно одна из 4-х панелей становится видимой(display: block;).
      Объясните пожалуйста как реализована такая технология.
    • By AndreyCore
      При нажатии на кнопку в форме, сайт не перезагружается как нужно.
      В чем проблема?
      <div class ='div-form'> <h1>CALC</h1> <form id = 'myform'> <label for = 'inp-1'>Число 1</label> <input class = 'inp' id = 'inp-1' type ='text'></input> <br/><p></p> <label for = 'inp-2'>Число 2</label> <input class = 'inp' id = 'inp-2' type = "text"></input></form><br/> <input id = 'bu-end' type ='submit' value ="Суммировать"></input> <p class = 'sum' id = 'sum'>Сумма: <span class = 'sum-r' id = 'sum-r'></span></p> </form><hr/> </div>  
    • By ashelpakov95
      Помогите, делаю чат-бота по этому уроку и коду https://fokit.ru/kak-sozdat-chat-bota-besplatno/
       
      Есть 6 веток вопросов. Я всё удобно подписал <!--Вопрос 1-->,<!--Вопрос 2-->....
      У меня бот прогоняет все вопросы какие есть.  Как сделать, чтобы после каждой ветки вопросов бот прекращал задавать вопросы? и еще, как сделать, чтобы бот выдавал вариант ответа, при нажатии на который, перекидывало на определенную страницу сайта?
      index-22.html
  • Member Statistics

    46,560
    Total Members
    3,128
    Most Online
    AnnaYa
    Newest Member
    AnnaYa
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.