Menu
I'm using bootstrap and making a layout with flex.
Currently the button is taking the height of the container. There is an awful lot of space under the text and i want to remove i and when I add padding to the button its becomes uneven in size. I tried to adjust the size by line height but i trying to find the actual solution and the reason as to why i'm having this problem.
Anything that i'm missing here with flex or is it something else? Any help will be highly appreciated. Thanks.
.vessel-card { display: flex; flex-direction: column; } .vessel-card h3 { margin: 0; padding: 20px 0; } .departure-card { display: flex; padding: 20px 0; border-top: 2px solid #888; } .departure-card p { margin-right: 10px; } .departure-card:last-child { border-bottom: 2px solid #888; } .departure-card .btn-explore { border: 1px solid #000; display: inline-block; text-transform: uppercase; color: #000; border-radius: 0; }<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-md-4 vessel-card"> <a href="cienfuegos-from-havana.html" class="special-departure"> <img src="http://placehold.it/350x150"> </a> <h3>Vessel: Panorama</h3> <div class="departure-card"> <p>Havana to Cienfuegos starting at $5,999</p> <a href="#" class="btn btn-explore">Explore</a> </div> <div class="departure-card"> <p>Havana to Cienfuegos starting at $5,999</p> <a href="cienfuegos-from-havana.html" class="btn btn-explore">Explore</a> </div> </div> </div> </div>
249
Flex-basis will still obey any min / max-width: or height settings. Again, it is based on the flex-direction: Flex-basis in a column overrides height:, this is important because although width: will obey flex-shrink, height: will not.
On the block axis ( flex-direction: column ), flex-basis takes the height of the flex-items into account, instead of their width. In this case, the flex-basis value prevails over the height value, just like with the width value on the inline axis.
Instead of max-height: 250px you should use flex: 0 0 250px and with flex-direction: column it will set height of element to 250px.
In addition to <button> elements, you may find this constraint applying to <fieldset> and <legend> elements, as well. See the bug reports below for more details. Note: Although they cannot be flex containers, <button> elements can be flex items.
Flexbox make items same height as you can see here Demo , but you can use align-items to change that or in your case Demo
.parent { align-items: center; display: flex; } .child { border: 1px solid black; margin: 5px; } .child:first-child { height: 100px; }<div class="parent"> <div class="child">Child</div> <div class="child">Child</div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
