User1291：

私が持っているので、

var layout = new HorizontalLayout();
layout.add(confirmButton);
layout.add(cancelButton);
layout.getElement().getStyle().set("flex-direction", "row-reverse");

ボタンが含まれているには短すぎるレイアウトでは、この結果、

これは、不要な水平スクロールバーへのターンリードで私が展開したときlayout全幅に。

どのように私は、レイアウト内のボタンを保つのですか？

更新

これはです

Vaadin 14.1.16
Java 11 (OpenJDK 11.0.6)
on whatever tomcat comes with Spring Boot 2.2.4.RELEASE
in Chrome 80.0.3987.106
on Linux (Ubuntu 19.10 derivate)

バジルボーク：

どうやらバグ

私はあなたのコードを試みたが、問題を検証しました。バグのようです。だから私は、開かれた問題チケット、＃7738を。

私は何が起こっているかを示すために、レイアウトに色の点線の境界線を追加しました。参照してくださいこの回答 Vaadinフローにおけるレイアウトに境界線を追加するための鉱山のを。

ここでは完全なサンプルアプリです。

ところで、私はあなたがにあなたの呼び出しをスキップすることができます疑いgetElement。HorizontalLayoutクラスは提供していますgetStyle明らかに同じ端を達成する便利なメソッドである方法自体は、。あなたの問題は、として呼び出すことなく表示されますgetElement。

package work.basil.example;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;


/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
//@PWA(name = "Project Base for Vaadin", shortName = "Project Base")
@CssImport ( "./styles/shared-styles.css" )
@CssImport ( value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field" )
public class MainView extends VerticalLayout
{

    public MainView ( )
    {
        HorizontalLayout plain = this.makeLayout();

        HorizontalLayout reversed = this.makeLayout();
        reversed.getStyle().set( "flex-direction" , "row-reverse" );

        this.add( plain , reversed );
    }

    private HorizontalLayout makeLayout ( )
    {
        // Widgets
        Button confirmButton = new Button( "Save" );
        Button cancelButton = new Button( "Cancel" );

        // Arrange
        HorizontalLayout layout = new HorizontalLayout();
        layout.add( confirmButton );
        layout.add( cancelButton );

        // Style
        layout.getStyle().set( "border" , "4px dotted DarkOrange" );

        return layout;
    }
}

そして、スクリーンショット。IntelliJの2019年3月3日の中突堤サーバーを使用して、Vaadin 14.1.18、Javaの13、MacOSのモハーベを実行します。クライアントには、Microsoftエッジ、バージョン80.0.361.62です。Safariの技術プレビュー版リリース101（サファリ13.2、WebKitの14610.1.3.1）であり、Firefoxの開発者版74.0b9（64ビット）で同様の結果。

なぜVaadinフロー14でレイアウトからボタンが突出していますか？

どうやらバグ

おすすめ